首页 > 代码库 > 照片墙拖动-3
照片墙拖动-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 排除自己与自己的碰撞?? 57 var pzArr = []; //每次move 初始为空 58 for (var i = 0 ; i< lilen;i++) { 59 if(obj != ali[i]) 60 { 61 pz(obj, ali[i]) && pzArr.push(ali[i]); 62 } 63 } 64 console.log(pzArr); 65 //拖动距离 算中心点 离哪一张图片的距离 66 //设计一个方法 距离最短 67 o = getshort(obj,pzArr); 68 for (var i=0;i<lilen;i++) { 69 ali[i].style.border = "0px solid red"; 70 } 71 if(o) //如果o 存在 72 { 73 o.style.border = "4px solid red"; 74 console.log(o); 75 } 76 77 } 78 obj.onmouseup =function() 79 { 80 document.onmousemove = null; 81 obj.onmouseup = null; 82 //判断是否有碰撞 83 if(!o) 84 { //回到原来的位置 85 //alert(obj.index); 86 move(obj,{ 87 left:picwz[obj.index].left, 88 top:picwz[obj.index].top 89 },1000,"backOut") 90 }else{ 91 o.style.border =""; 92 var p1 = picwz[obj.index]; 93 var p2 = picwz[o.index]; 94 //移动图片 95 move(obj,{ 96 left:p2.left, 97 top:p2.top 98 },1000,"backOut") 99 //被移动图片100 move(o,{101 left:p1.left,102 top:p1.top103 },1000)104 //由于索引没有变化 就需要替换105 //设置第三方变量存 index106 var _index = obj.index;107 obj.index = o.index;108 o.index = _index;109 }110 }111 return false;112 }113 //碰撞检测114 function pz(obj1,obj2)115 {116 var L1 = obj1.offsetLeft;117 var T1 = obj1.offsetTop;118 var R1 = L1+ obj1.offsetWidth;119 var B1 = T1+ obj1.offsetHeight;120 var L2 = obj2.offsetLeft;121 var T2 = obj2.offsetTop;122 var R2 = L2+ obj1.offsetWidth;123 var B2 = T2+ obj1.offsetHeight;124 // if (R1<L2 || B1 < T2 || L1 > R2 || T1 > B2) {125 // }126 return !(R1<L2 || B1 < T2 || L1 > R2 || T1 > B2)127 }128 function getshort(obj,arr)129 {130 var o = null;131 var pos = 100000;132 for(var i =0;i<arr.length;i++)133 {134 var a = (obj.offsetTop + obj.offsetHeight/2) - (arr[i].offsetTop + arr[i].offsetHeight/2);135 var b = (obj.offsetLeft+ obj.offsetWidth/2) - (arr[i].offsetLeft + arr[i].offsetWidth/2);136 c =Math.sqrt(a*a + b*b);137 if(c<pos)138 {139 pos = c;140 o = arr[i]; //最小值141 }142 }143 return o;144 }145 //随机数146 btn.onclick=function()147 {148 var arr =[];149 for (var i = 0; i<lilen;i++) {150 arr.push(i);151 }152 arr.sort(function(){153 return Math.random() - 0.5154 })155 console.log(arr);//随机数组中[2, 3, 0, 1, 4, 5, 7, 8, 6]156 157 for (var i = 0; i<lilen;i++) {158 var posindex = arr[i];//随机数组中[2, 3, 0, 1, 4, 5, 7, 8, 6]159 ali[i].index = posindex; //这一步非常重要 索引 根据变化的值而变化160 move(ali[i],{161 left:picwz[posindex].left,162 top:picwz[posindex].top163 },1000,"backOut")164 }165 }166 }167 }168 </script>169 </head>170 <body>171 <input type="button" value="随机" id="btn" />172 <ul id="ul1">173 <li><img src="photo/1.jpg" alt="" /></li>174 <li><img src="photo/2.jpg" alt="" /></li>175 <li><img src="photo/3.jpg" alt="" /></li>176 <li><img src="photo/4.jpg" alt="" /></li>177 <li><img src="photo/5.jpg" alt="" /></li>178 <li><img src="photo/1.jpg" alt="" /></li>179 <li><img src="photo/2.jpg" alt="" /></li>180 <li><img src="photo/3.jpg" alt="" /></li>181 <li><img src="photo/4.jpg" alt="" /></li>182 </ul>183 184 </body>185 </html>
知识点补充：
JavaScript随机打乱数组
1 var arr = [4,1,67,12,45,121,3]; 2 arr.sort(function() { 3 return (0.5-Math.random()); 4 })
代码
arr.sort(function(){ return 0.5 - Math.random() })
//sort 是对数组进行排序
//他的是这样工作的。每次从数组里面挑选两个数 进行运算。
//如果传入的参数是0 两个数位置不变。
//如果参数小于0 就交换位置
//如果参数大于0就不交换位置
//接下来用刚才的较大数字跟下一个进行比较。这样循环进行排序。
/*恰好。我们利用了这一点使用了0.5 - Math.random 这个运算的结果要么是大于0,要么是小于0.这样要么交换位置，要么不交换位置。当然大于或者小于0是随即出现的。所以数组就被随即排序了。*/
照片墙拖动-3
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。