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