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

最新推荐文章于 2021-06-04 12:29:09 发布

YQEMMMM

最新推荐文章于 2021-06-04 12:29:09 发布

阅读量4k

点赞数 3

分类专栏： HTML专栏文章标签： html css

本文链接：https://blog.csdn.net/YQEMMMM/article/details/109181292

版权

HTML专栏专栏收录该内容

15 篇文章 8 订阅

订阅专栏

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

功能要求：
使用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) {
            …………………………