1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 #ul1 {margin: 50px auto 0; padding: 0; width:630px; position: relative;}
8 li {float: left; margin: 0 10px 10px 0; width: 200px; height: 150px; list-style: none;}
9 li img {display: block;}
10 </style>
11 <script type="text/javascript">
12 window.onload=function()
13 {
14 var oul = document.getElementById("ul1");
15 var ali = document.getElementsByTagName("li");
16 var lilen = ali.length;
17 //转换定位
18 // for (var i=0;i<lilen;i++) {
19 // ali[i].style.position = "absolute";
20 // }
21 //创建一个数组保存 每个图片的位置
22 var picwz =[];
23 for (var i=0;i<lilen;i++) {
24 picwz.push({
25 left:ali[i].offsetLeft,
26 top:ali[i].offsetTop
27 })
28 }
29 for (var i=0;i<lilen;i++) {
30 ali[i].style.left = picwz[i].left +"px";
31 ali[i].style.top = picwz[i].top +"px";
32 ali[i].style.position = "absolute";
33 drag(ali[i])//调用拖动图片函数
34 }
35 function drag(obj)
36 {
37 var disX = 0;
38 var disY = 0;
39 obj.onmousedown = function(ev)
40 {
41 var ev = ev || event;
42 disX = ev.clientX - obj.offsetLeft ;
43 disY = ev.clientY - obj.offsetTop ;
44 document.onmousemove = function(ev)
45 {
46 var ev = ev || event;
47 obj.style.left = ev.clientX - disX +"px";
48 obj.style.top = ev.clientY - disY +"px";
49 }
50 obj.onmouseup =function()
51 {
52 document.onmousemove = null;
53 obj.onmouseup = null;
54 }
55 return false;
56 }
57 }
58 }
59 </script>
60 </head>
61 <body>
62 <ul id="ul1">
63 <li><img src="photo/1.jpg" alt="" /></li>
64 <li><img src="photo/2.jpg" alt="" /></li>
65 <li><img src="photo/3.jpg" alt="" /></li>
66 <li><img src="photo/4.jpg" alt="" /></li>
67 <li><img src="photo/5.jpg" alt="" /></li>
68 <li><img src="photo/1.jpg" alt="" /></li>
69 <li><img src="photo/2.jpg" alt="" /></li>
70 <li><img src="photo/3.jpg" alt="" /></li>
71 <li><img src="photo/4.jpg" alt="" /></li>
72 </ul>
73
74 </body>
75 </html>
时间： 2024-08-26 00:06:43