照片墙拖动-3
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了照片墙拖动-3相关的知识，希望对你有一定的参考价值。
效果：随机数组 索引值改变
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/move.js" type="text/javascript" charset="utf-8"></script> 7 <style type="text/css"> 8 #ul1 {margin: 50px auto 0; padding: 0; width:630px; position: relative;} 9 li {float: left; margin: 0 10px 10px 0; width: 200px; height: 150px; list-style: none;} 10 li img {display: block;} 11 </style> 12 <script type="text/javascript"> 13 window.onload=function() 14 { 15 var btn = document.getElementById("btn"); 16 var oul = document.getElementById("ul1"); 17 var ali = document.getElementsByTagName("li"); 18 var lilen = ali.length; 19 var zindex = 1; 20 21 //转换定位 22 // for (var i=0;i<lilen;i++) { 23 // ali[i].style.position = "absolute"; 24 // } 25 //创建一个数组保存 每个图片的位置 26 var picwz =[]; 27 for (var i=0;i<lilen;i++) { 28 picwz.push({ 29 left:ali[i].offsetLeft, 30 top:ali[i].offsetTop 31 }) 32 } 33 for (var i=0;i<lilen;i++) { 34 ali[i].index = i; //为了回到原来的位置增加的索引值 35 ali[i].style.left = picwz[i].left +"px"; 36 ali[i].style.top = picwz[i].top +"px"; 37 ali[i].style.position = "absolute"; 38 drag(ali[i])//调用拖动图片函数 39 } 40 function drag(obj) 41 { 42 var disX = 0; 43 var disY = 0; 44 var o = null; 45 obj.onmousedown = function(ev) 46 { 47 var ev = ev || event; 48 disX = ev.clientX - obj.offsetLeft ; 49 disY = ev.clientY - obj.offsetTop ; 50 obj.style.zIndex = zindex++; 51 document.onmousemove = function(ev) 52 { 53 var ev = ev || event; 54 obj.style.left = ev.clientX - disX +"px"; 55 obj.style.top = ev.clientY - disY +"px"; 56 //碰撞检测 循环所以Li 排除自己与自己的碰撞以上是关于照片墙拖动-3的主要内容，如果未能解决你的问题，请参考以下文章