首页 > 代码库 > 照片墙拖动-1
照片墙拖动-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].offsetTop27 })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>
照片墙拖动-1
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。