图片相框展示的设计与实现

功能要求：
使用HTML5拖放API相关技术，在网页上实现为指定图片自动生成图片相框的效果。用户通过拖拽可以将本地的图片文件放置到页面上指定区域，即可在页面上自动生成带有相框效果的图片展示。
实现效果图：

一、界面设计
1.使用<div>标签划分区域
1）本地文件放置区域
2）带有相框图片的展示区域

2.CSS文件辅助渲染样式
1）自定义外部样式表photoframe.css文件

二、相框自动生成功能的实现
1.可放置区域的实现

<div id="recycle" ondragover="allowDrop(event)"  >请将图片拖放至此处</div>

//ondragover事件回调函数function allowDrop(ev) {//解禁当前元素为可放置被拖拽元素的区域ev.preventDefault();}

2.生成带有相框的图片效果

<div id="recycle" ondragover="allowDrop(event)" ondrop="fileDrop(event)"  >

 function fileDrop(e) {…//清空上一次图片内容//获取从本地拖拽放置的文件对象数组files//使用for循环遍历同时被拖拽并放置到指定区域的所有文件}

3.显示图片文件信息

//获取当前文件的最新修改日期var lastModified = f.lastModifiedDate;//修改当前文件的最新修改日期的描述格式var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a';//设置图片下方状态信息栏描述内容status.innerHTML = '<strong>' + f.name + '</strong> (' + (f.type || 'n/a') + ')<br>大小：' + f.size + '字节<br>修改时间：' + lastModifiedStr;

三、完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML5拖放API之图片相框效果</title><link rel="stylesheet" href="css/photoframe.css"></head><body><h3>HTML5拖放API之图片相框效果</h3><hr /><!--可放置文件区--><div id="recycle" ondragover="allowDrop(event)" ondrop="fileDrop(event)">请将图片拖放至此处</div><br /><!--带有相框的图片展示区--><div id="output"></div><script>//ondragover事件回调函数function allowDrop(ev) {//解禁当前元素为可放置被拖拽元素的区域ev.preventDefault();}//ondrop事件回调函数function fileDrop(e) {…………………………

备注：查看完整代码请下载附件
https://download.csdn.net/download/YQEMMMM/12982765

图片相框展示的设计与实现相关推荐

JavaScript 图片3D展示空间（3DRoom）
一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果. 程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间. 很久以前就看过一个3DRoo ...
图片服务器项目编写设计
待到秋来九月八,我花开后百花杀项目背景项目所涉及知识点服务器设计数据库设计服务器API(前后端交互接口)设计涉及知识点正式设计接口功能(约定HTTP协议格式) 编写源代码开发数据库操作 ...
JavaScript 图片滑动展示效果javascript
javascript 图片滑动展示效果更新版本:slideview 图片滑动(扩展/收缩)展示效果看到jquery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个. 其中的 ...
基于PHP的图片共享系统的设计与实现
基于PHP的图片共享系统的设计与实现摘要本系统主要从现代社会电脑化观念出发,通过对现有资料的分析.研究和整理,确定了在基于现存的WEB2.0模式下开发图片共享系统的可行性.紧迫性和必要性.在现阶 ...
HTML5期末大作业：个人信息展示网站设计——清新春暖花开个人博客网站(6页) HTML+CSS+JavaScript...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
python opencv 中bmp转raw格式图片并展示
python中bmp转raw格式图片并展示 import numpy as np import cv2 img = cv2.imread('data/04/04(1).bmp') # 这里需要我们在当 ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
TF之DD：利用Inception模型+GD算法生成带背景的大尺寸、高质量的Deep Dream图片——五个架构设计思维导图
TF之DD:利用Inception模型+GD算法生成带背景的大尺寸.高质量的Deep Dream图片--五个架构设计思维导图目录 TF中的Deep Dream实践:利用Inception模型+GD算 ...
Dataset之图片数据增强：设计自动生成汽车车牌图片算法(cv2+PIL)根据随机指定七个字符生成逼真车牌图片数据集(自然场景下+各种噪声效果)可视化
Dataset之图片数据增强:设计自动生成汽车车牌图片算法(cv2+PIL)根据随机指定七个字符生成逼真车牌图片数据集(自然场景下+各种噪声效果)可视化导读设计自动生成汽车车牌图片算法,基于cv2 ...

图片相框展示的设计与实现

图片相框展示的设计与实现

图片相框展示的设计与实现相关推荐

最新文章

热门文章