Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to automatically generate photo frame effect by dragging and dropping API". In daily operation, I believe many people have doubts about how to automatically generate photo frame effect by dragging and dropping API. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the question of "how to automatically generate photo frame effect by dragging and dropping API". Next, please follow the editor to study!

Function: drag the desktop picture to the specified place to generate a picture frame and related information.

The photo frame needs to be configured by itself, set as the background, and set in CSS.

Html section:

H5 drag and drop the picture frame effect of API, please drag and drop the picture here

CSS section:

* {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 # 48D1CCC; 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 section:

_ 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; / / get the latest modification date of the current file var lastModified = files [0] .lastModifiedDate; / / modify the current file's latest modification date description format var lastModifiedStr = lastModified? LastModified.toLocaleDateString () +''+ lastModified.toLocaleTimeString (): 'nUniverse; / / set the description content of the status information bar below the picture var fileStatus = "1. Name:" + files [0] .name + "

two。 Type: "+ files [0] .type +"

3. Size: "+ files [0] .size +" bytes "+"

4. Modification time: "+ lastModifiedStr +"+"; box2.appendChild (photoFrame ()); Box2 [XSS _ clean] = box2 [XSS _ clean] + fileStatus; / / set the image path 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 ();} at this point, the study on "how to automatically generate a picture frame by dragging and dropping API" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.