浙江铃声推荐联盟

Web前端开发技术学习教程 js照片墙拖拽特效

web前端开发html2019-11-11 14:28:36

 1 <!DOCTYPE html>  2 <html>  3 <head>  4     <title>筱白迩</title>  5     <style type="text/css">  6         *{  7             margin: 0;  8             padding: 0;  9         } 10         div{ 11             width: 666px; 12             height: 666px; 13             border: 1px solid yellow; 14             margin: 0px auto; 15             box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.7); 16             position: relative; 17         } 18         li{ 19             width: 200px; 20             height: 200px; 21             list-style: none; 22             float: left; 23             margin: 10px; 24             border: 1px solid transparent; 25         } 26         li img{ 27             width: 200px; 28             height: 200px; 29             box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.7); 30         } 31     </style> 32 </head> 33 <body> 34     <div> 35         <ul> 36             <li><img src="1.jpg"></li> 37             <li><img src="2.jpg"></li> 38             <li><img src="3.jpg"></li> 39             <li><img src="4.jpg"></li> 40             <li><img src="5.jpg"></li> 41             <li><img src="6.png"></li> 42             <li><img src="7.jpg"></li> 43             <li><img src="8.jpg"></li> 44             <li><img src="9.jpg"></li> 45         </ul> 46     </div> 47 </body> 48 <script src="move.js"></script> 49 <script type="text/javascript"> 50     var aLi = document.getElementsByTagName('li'); 51  52     var arr = []; 53     var len = aLi.length; 54     for(var i=0; i<len; i++){ 55         arr.push([aLi[i].offsetLeft,aLi[i].offsetTop]); 56     } 57     for(var i=0; i<len; i++){ 58         aLi[i].style.position = "absolute"; 59         aLi[i].style.left = arr[i][0] + "px"; 60         aLi[i].style.top = arr[i][1] + "px"; 61         aLi[i].style.margin = 0; 62     } 63     for(var i =0; i<len; i++){ 64         aLi[i].index = i; 65         drag(aLi[i]); 66     } 67     var z  =1; 68     function drag(obj){ 69         obj.onmousedown = function(e){ 70             // var e || window.event; 71             var x1 = e.clientX, 72                 y1 = e.clientY; 73                  74  75             var l  = obj.offsetLeft, 76                 t  = obj.offsetTop; 77                 obj.style.zIndex = z++; 78             document.onmousemove = function(e){ 79                 var e = e || window.event; 80                 var _left = e.clientX - x1 +l; 81                 var _top = e.clientY - y1 +t; 82  83                 obj.style.left = _left + "px"; 84                 obj.style.top = _top + "px"; 85  86                 var oLi = nearLi(obj); 87                 for(var k=0; k<len;k++){ 88                     aLi[k].style.border = "1px solid transparent"; 89                 } 90                 if(oLi){ 91                     oLi.style.border = "4px solid yellow"; 92                 } 93  94             } 95             document.onmouseup = function(){ 96                 document.onmousemove = null; 97                 document.onmouseup = null; 98                 var nL = nearLi(obj); 99                 var tmp = 0;100                 if(nL){101                     nL.style.border = "1px solid transparent";102                     startMove(nL,{left:arr[obj.index][0],top:arr[obj.index][1]});103                     startMove(obj,{left:arr[nL.index][0],top:arr[nL.index][1]});104                     tmp = obj.index;105                     obj.index = nL.index;106                     nL.index = tmp;107                 }else{108                     startMove(obj,{left:arr[obj.index][0],top:arr[obj.index][1]});109                 }110             }111             return false;112         }113     }114     function impact(obj1,obj2){115         var T1 = obj1.offsetTop,116             L1 = obj1.offsetLeft,117             B1 = T1 + obj1.offsetHeight,118             R1 = L1 + obj1.offsetWidth;119         var T2 = obj2.offsetTop,120             L2 = obj2.offsetLeft,121             B2 = T2 + obj2.offsetHeight,122             R2 = L2 + obj2.offsetWidth;123         if(R1<L2 || B1<T2 || T1>B2 || L1>R2){124             return false125         }else{126             return true;127         }128     }129     function distance(obj1,obj2){130         var a = obj1.offsetLeft - obj2.offsetLeft;131         var b = obj1.offsetTop - obj2.offsetTop;132         return Math.sqrt(a*a+b*b);133     }134     function nearLi(obj){135         var n = 100000;136         var oLi = "";137         for(var j=0; j<len; j++){138                     if(impact(obj,aLi[j]) && obj != aLi[j]){139                         var c = distance(obj,aLi[j]);140                         if(c<n){141                             n = c;142                             oLi = aLi[j];143                         }144                     }145                     146                 }147                 return oLi;148     }149 </script>150 </html>

素材要求: 图片文件为9张正方形图片,否则容易让图片变形,图片格式任意。还需要导入move.js框架。

如果你喜欢本站,请关注我们吧!