<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8"> <title>照片墙-sunshinegirl</title> <style> *{ margin:0; padding:0; } li{ list-style:none; } #div1{ 900px; margin:0px auto; } #div1 ul{ margin-top:10px; 900px; height:550px; padding:10px; border:1px dashed #000; overflow:hidden; position: relative; } #div1 ul li{ float:left; margin:10px; 200px; height:150px; overflow: hidden; position: relative; z-index:1; } img{ 200px; height:150px; } #active{ border:2px dashed red; } </style> <script> function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; for(var attr in json) { var iCur=0; if(attr=='opacity') { iCur=parseInt(parseFloat(getStyle(obj, attr))*100); } else { iCur=parseInt(getStyle(obj, attr)); } var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur!=json[attr]) { bStop=false; } if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else { obj.style[attr]=iCur+iSpeed+'px'; } } if(bStop) { clearInterval(obj.timer); fn && fn(); } }, 30) } window.onload=function(){ //获取元素 var oDiv=document.getElementById("div1"); var btn=document.getElementById("btn"); var oLi=document.getElementsByTagName('li'); //定义一个空数组放所有json对象 var arr=[]; //初始化所有层次为2 var alterZindex=2; //把所有作为传入数组 for( var i = 0; i < oLi.length;i++ ){ arr.push([oLi[i].offsetLeft,oLi[i].offsetTop]); } //初始化,位置变成absolute for( var i = 0; i < oLi.length;i++ ){ oLi[i].style.left=arr[i][0]+"px"; oLi[i].style.top=arr[i][1]+"px"; oLi[i].style.position="absolute"; oLi[i].style.margin="0px"; } //给每一个加索引值,且加上拖拽功能 for( var i = 0; i < oLi.length;i++ ){ oLi[i].index=i; drag(oLi[i]); } //拖拽函数 function drag(obj){ var dragX=0,dragY=0; //鼠标按下时 obj.onmousedown=function(ev){ alterZindex++; obj.style.zIndex=alterZindex; ev=ev||event; dragX=ev.clientX-obj.offsetLeft; dragY=ev.clientY-obj.offsetTop; //初始化一个空对象,放最近的 var nearObj=null; //页面上鼠标移动时 document.onmousemove=function(ev){ ev=ev||event; obj.style.left=ev.clientX-dragX+"px"; obj.style.top=ev.clientY-dragY+"px"; var arr1=[]; var min=Infinity; //把所有碰撞到的找出来 for( var i = 0; i < oLi.length;i++ ){ oLi[i].id=""; if(crash(obj,oLi[i])){ arr1.push(oLi[i]); } } //把自己除掉 for( var j = 0; j < arr1.length;j++ ){ if(obj===arr1[j]){ arr1.splice(j,1); } } //找出最近的那个 for( var j = 0; j < arr1.length;j++ ){ var left=Math.abs(arr1[j].offsetLeft-obj.offsetLeft); var top=Math.abs(arr1[j].offsetTop-obj.offsetHeight); var value=Math.sqrt(left*left+top*top); if(min>value){ min=value; nearObj=arr1[j]; } } //给最近的添加样式 if(nearObj){ nearObj.id="active"; } }; //页面上鼠标抬起时 document.onmouseup=function(){ document.onmousemove=document.onmouseup=null; if(obj.releaseCapture){ obj.releaseCapture(); } //如果有最近的,那么交换位置,且索引值交换 if(nearObj){ nearObj.id=""; startMove(obj,{left:arr[nearObj.index][0],top:arr[nearObj.index][1]}); startMove(nearObj,{left:arr[obj.index][0],top:arr[obj.index][1]}); var temp=-1; temp=nearObj.index; nearObj.index=obj.index; obj.index=temp; }else{ //没有最近的,还是回到自己位置 startMove(obj,{left:arr[obj.index][0],top:arr[obj.index][1]}); } //把所有的索引值重新设为2 for( var i = 0; i < oLi.length;i++ ){ oLi[i].zIndex=2; } if(ev.preventDefault){ ev.preventDefault(); } } //全局捕获 if(obj.setCapture){ obj.setCapture(); } //去掉浏览器默认行为 if(ev.preventDefault){ ev.preventDefault(); } } } //检测碰撞函数 function crash(obj1,obj2){ var obj1L=obj1.offsetLeft; var obj1T=obj1.offsetTop; var obj1W=obj1.offsetWidth; var obj1H=obj1.offsetHeight; var obj2L=obj2.offsetLeft; var obj2T=obj2.offsetTop; var obj2W=obj2.offsetWidth; var obj2H=obj2.offsetHeight; if(obj1L+obj1W<obj2L||obj1T+obj1H<obj2T||obj1L>obj2L+obj2W||obj1T>obj2T+obj2H){ return false; }else{ return true; } } //点击"随机"时,把索引值打乱,交换,且索引值交换 btn.onclick=function(){ var randomArr=[]; for( var i = 0; i < oLi.length;i++ ){ randomArr.push(i); } randomArr.sort(function(a,b){ return Math.random()-0.5; }) for( var i = 0; i < oLi.length;i++ ){ startMove(oLi[i],{left:arr[randomArr[i]][0],top:arr[randomArr[i]][1]}); oLi[i].index=randomArr[i]; } } } </script> </head> <body> <div id="div1"> <input type="button" value="随机" id="btn" /> <ul id="oUl"> <li> <img src="http://img3.3lian.com/2013/v9/42/24.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v8/14/45.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v8/6/89.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v11/86/84.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v11/86/91.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v10/4/82.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v9/96/82.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v11/77/64.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v10/4/85.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v7/2/54.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v9/96/86.jpg" /> </li> <li> <img src="http://img3.3lian.com/2013/v11/49/2.jpg" /> </li> </ul> </div> </body> </html>