js照片墙拖拽特效
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>
素材要求： 图片文件为9张正方形图片，否则容易让图片变形，图片格式任意。还需要导入move.js框架。
新手练习，多多包涵。
