js照片墙拖拽特效

2018-06-24 01:37:18来源：未知阅读 ()

  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 false
125         }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>