照片墙拖动-1 

 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>

 

posted @ 2016-09-06 17:57  h5monkey  阅读(177)  评论(0)    收藏  举报