HTML5自动生成相框,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实现自动生成相框功能的文章就介绍到这了,更多相关html5 拖放API生成相框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!
展开阅读全文
HTML5自动生成相框,HTML5拖放API实现自动生成相框功能相关推荐
- html5自动生成图片,HTML5拖放API如何实现自动生成相框功能 HTML5拖放API实现自动生成相框功能代码...
HTML5拖放API如何实现自动生成相框功能?下面小编给大家分享一下HTML5拖放API实现自动生成相框功能代码,代码很详细,小编觉得挺不错的,有需要的小伙伴们可以来看看. 实现功能: 将桌面图片拖入 ...
- html相框自动生成功能,网页制作HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
- html5相框,科技常识:HTML5拖放API实现自动生成相框功能
今天小编跟大家讲解下有关HTML5拖放API实现自动生成相框功能 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5拖放API实现自动生成相框功能 的相关资料,希望小伙伴们看了有所帮 ...
- laya 怎么生成签名_PHP开发API接口签名生成及验证
开发过程中,我们经常会与接口打交道,有的时候是调取别人网站的接口,有的时候是为他人提供自己网站的接口,但是在这调取的过程中都离不开签名验证. 我们在设计签名验证的时候,请注意要满足以下几点: 可变性: ...
- php开发自动拨号,使用Asterisk manager API实现自动拨号
在实现自动呼叫的示例中我使用的是Asterisk manager API中的Originate方法,该方法在phpagi的中.具体定义如下:(英文我就不解释了,我英文很水) /** * Origina ...
- 基于HTML5拖放API:目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能,用户可以选择本地图片文件然后为其添加相框效果
这是一份很简单的作业,由于百度当时没找到,就自己写了一下,命名不是很机智只是为了写的快且好懂,使用只需要将桌面的图片拖拉进里面就直接生成一个新的带相框的图片,代码很短好理解.. <!DOCTYP ...
- HTML5 进阶系列:拖放 API 实现拖放排序
前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个元素,必须设置该元素的 dragga ...
- HTML5拖放API,回收站效果
目录 最终展示结果: API概念: 源码: html及js部分 css部分: image资源 最终展示结果: API概念: ----来自百度百科 API之主要目的是提供应用程序与开发人员以访问一组例程 ...
- HTML5拖放API
1. 开启拖放 将将要拖放的对象元素的draggable属性设置为true,任何元素均可实现拖放,但img与a元算(必须制定href)默认允许拖放. 2.与拖放相关的事件 事件 产生事件的元素 描述 ...
最新文章
- windows系统下Python环境的搭建及Selenium的安装
- lsof查看占用高_linux lsof命令查看文件占用进程
- windows puppet manifests 文件维护
- MATLAB入门学习(三)
- Android开发自定义View之滑动按钮与自定义属性
- JS获取url多个参数及解决中文乱码问题
- POJ1177(扫描线求周长并)
- linux系统MongoDB4.0安装,密码设置,常用命令,集成springmvc
- C# 连接sql 2005
- eclipse sdk 无法更新
- javascript 原型链实现继承简单例子
- 10款翻译引擎全面对比,别再无脑吹DeepL了,根本不好用!
- Excel表格打印时不打印标记填充颜色
- 研究生期间论文发表经验总结
- redis读写分离之lettuce
- Linux下启动jar包不跑日志
- 男人40岁后的健康生活方式
- JS HTML5仿微信朋友圈特效
- 《一周学完光线追踪》学习 十一点五 离焦模糊代码原理分析
- 一直帮助别人,自己的事都做不好 其实也是非常自私的一种行为
热门文章
- 如何免费领取高德打车100元礼包?
- Java程序编译时,出现‘xxx‘ is deprecated and marked for removal报错的临时处理方法
- Solidwork另存为PDF格式文件不全
- 11.2.5 角度与弧度互换函数
- Oracle 11g用户解锁
- APP的注册和登录功能设计,你连原理都还没弄明白
- axel 下载与安装
- 黑马程序员JAVA高新技术(一)
- leaflet 根据两个坐标值,设置arc弧线和Marker(079)
- C#中unsafe的使用