html相框自动生成功能,网页制作HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息。
相框需要自己配置,设置为背景,在CSS中设置。
效果如图:
html部分:
H5拖放API之图片相框效果
请将图片拖放至此处
CSS部分:
* {
margin: 0px;
padding: 0px;
}
.box2 hr {
border: 3px solid blueviolet;
}
.box {
width: 240px;
height: 150px;
border: 1px dotted red;
text-align: center;
margin: 20px auto;
line-height: 150px;
}
.box2 {
margin: 20px auto;
width: 240px;
padding: 30px;
border: 3px solid pink ;
font-size: 13px;
}
.photoFrame {
border-top: 15px solid #90EE90;
border-bottom: 15px solid #90EE90;
border-left: 15px solid #48D1CC;
border-right: 15px solid #20B2AA;
border-style: inset;
width: 200px;
height: 200px;
background: url(../imgs/ptoto.jpg);
margin: 10px auto;
position: relative;
overflow: hidden;
}
img {
position: absolute;
width: 154px;
height: 141px;
left: 25px;
top: 30px;
right: 30px;
bottom: 30px;
}
li {
list-style-type: none;
}
JS部分
window.onload = function() {
var box2 = document.querySelector(".box2");
var box = document.querySelector(".box");
var count = 0;
function photoFrame() {
var d1 = document.createElement("div");
d1.className = "photoFrame";
d1.style.marginTop = "30px";
d1.style.marginLeft = "5px";
var img = document.createElement("img");
img.src = "";
count++;
img.id = 'img' + parseInt(count);
d1.appendChild(img);
return d1;
}
box.ondragover = function(ev) {
ev.preventDefault();
}
box.ondrop = function(ev) {
ev.preventDefault();
var files = ev.dataTransfer.files;
//获取当前文件的最新修改日期
var lastModified = files[0].lastModifiedDate;
//修改当前文件的最新修改日期的描述格式
var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a';
//设置图片下方状态信息栏描述内容
var fileStatus = "
1.名称:" + files[0].name + "
2.类型:" + files[0].type + "
3.大小:" +
files[0].size + "字节" + "
4.修改时间:" + lastModifiedStr + "
" + "
";
box2.appendChild(photoFrame());
box2.innerHTML = box2.innerHTML + fileStatus;
//设置图片路径
function setPath() {
var fd = new FileReader();
if(files[0].type.indexOf('image') != 1) {
fd.readAsDataURL(files[0]);
count++;
var id = "img" + parseInt(count - 1);
var img = document.getElementById(id);
fd.onload = function() {
var img = document.getElementById(id);
img.src = this.result;
}
}
}
setPath();
}
}
总结
到此这篇关于HTML5拖放API实现自动生成相框功能的文章就介绍到这了,更多相关内容请搜索米云问答以前的文章或继续浏览下面的相关文章,希望大家以后多多支持米云问答!
html相框自动生成功能,网页制作HTML5拖放API实现自动生成相框功能相关推荐
- html5自动生成图片,HTML5拖放API如何实现自动生成相框功能 HTML5拖放API实现自动生成相框功能代码...
HTML5拖放API如何实现自动生成相框功能?下面小编给大家分享一下HTML5拖放API实现自动生成相框功能代码,代码很详细,小编觉得挺不错的,有需要的小伙伴们可以来看看. 实现功能: 将桌面图片拖入 ...
- HTML5自动生成相框,HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
- html5相框,科技常识:HTML5拖放API实现自动生成相框功能
今天小编跟大家讲解下有关HTML5拖放API实现自动生成相框功能 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5拖放API实现自动生成相框功能 的相关资料,希望小伙伴们看了有所帮 ...
- 基于HTML5拖放API:目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能,用户可以选择本地图片文件然后为其添加相框效果
这是一份很简单的作业,由于百度当时没找到,就自己写了一下,命名不是很机智只是为了写的快且好懂,使用只需要将桌面的图片拖拉进里面就直接生成一个新的带相框的图片,代码很短好理解.. <!DOCTYP ...
- HTML5拖放API,回收站效果
目录 最终展示结果: API概念: 源码: html及js部分 css部分: image资源 最终展示结果: API概念: ----来自百度百科 API之主要目的是提供应用程序与开发人员以访问一组例程 ...
- html拖放api之图片相框,html5拖放API简介及应用
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 通常我们在上传文件时,需要使用 这样的上传文件标签.而在html5中,它提供了拖放的接口,以下的内容就是对html5拖放 ...
- html如何制作滑块,网页制作html5实现滑块功能之type=quot;rangequot;属性-建站-建站教程-建站方法-米云建站 - 米云问答...
html5实现滑块功能之type="range"属性 1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range. 2.感觉挺有意思,就做了一个 ...
- html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...
一.问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div ...
- html5 实现游戏直播,网页制作HTML5播放实现rtmp流直播
最近在做一个直播推流的功能,想自己写个网页进行直播尝试一下. 然后网上试了各种教程都没成功,下面说下遇到的几个坑. 1.首先通过obs进行推流,服务器是:rtmp://192.168.0.221/li ...
最新文章
- 假如时光倒流,你依然会变成现在的你
- (6) Google2012笔试卷
- Google 高薪争夺 Rust 人才,将用 Rust 重构关键组件!
- 波士顿大学 计算机专业,波士顿大学计算机工程类专业排名还是该小心的看
- win10+macOS双系统时间不同步解决方案
- 中兴防火墙配置_中兴防火墙命令手册 中兴c600基本命令
- win32根据进程名获取进程ID或者终止进程
- 理解WSDL,IDL
- 计算机二级C语言100套题
- Mac修改键盘之 将 caps lock修改为esc
- 有效提高网站打开速度的途径,给你的网站提速
- cpu功耗排行_2019年cpu功耗排行榜_电脑处理器排行榜2019
- CC2640R2f片上OAD工程简单说明
- Quartus II 中的SignalTap II 的使用
- ROS学习-3 (C++编程实现创建发布者+发布数据控制海龟运动)
- DOS游戏编程二十一条
- iOS 支付宝页面无法跳转
- linux通过resolve配置dns,使用systemd-resolved在Fedora上通过TLS配置DNS的方法
- windows文件夹列表展示文件夹大小
- 第十章 图(BFS基础算法)
热门文章
- 简约风博客bootstrap实现
- 服务器装2008系统蓝屏,Windows Server 2008 R2 Enterprise 服务器蓝屏 代码0x00000124 - Microsoft Community...
- 【微信小程序+node】微信小程序结合node用户登录-06
- 2022英伟达(NVIDA)实习生笔试(ASIC PD岗位)
- OKNC,一种由平民社区自下而上的发展模式
- 婴儿呼吸有声音是怎么回事?
- IPv6即将来临,IPv6的信息安全?
- DNF选服务器ms不稳定,DNF:玩家投票普雷炸团原因,我们错怪萌新了,掉线才是罪魁祸首...
- Python 爬虫实例
- 毛坯房验房流程与注意事项