此项目使用了 拖拽、碰撞 、动画运动、定位转换
判断最近的一个位置，采用勾股定理的方法
是否碰撞？ 画张图勾出来了，
<html>
<head>
<meta charset="utf-8">
<title>图片中间放大-拖拽移动</title>
<script type="text/javascript" src="js/base.js"></script>
<style type="text/css">
body,ul,li,img{margin:0px;padding:0px;}
ul,li{list-style:none;}
#ul1{
width:660px;
margin:15px auto;
height:auto;
position:relative;
z-index:1;
}
#ul1::after{
}
#ul1 li{
width:200px;
height:160px;
margin:10px;
float:left;
overflow:hidden;
cursor: move;
}
#ul1 li img{
display:block;
width:200px;
height:160px;
}
#ul1 li.active{
border:1px dashed #f60;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("ul1");
var oUlLi=oUl.getElementsByTagName("li");
var isZindex=1;
var liPosition=[];
for(var i=0;i<oUlLi.length;i++){
oUlLi[i].style['left']=oUlLi[i].offsetLeft;
oUlLi[i].style['top']=oUlLi[i].offsetTop;
oUlLi[i].index=i;
liPosition.push({"top":oUlLi[i].offsetTop,"left":oUlLi[i].offsetLeft});
}
for(var i=0;i<oUlLi.length;i++){
oUlLi[i].style['position']="absolute";
oUlLi[i].style['zIndex']=isZindex++;
oUlLi[i].style['margin']="0px";
}
var prev_x=0;
var prev_y=0;
for(var i=0;i<oUlLi.length;i++){
oUlLi[i].onmousedown=function(ev){
var _this=this;
var oEvent=ev||event;
var mouseX=oEvent.clientX;
var mouseY=oEvent.clientY;
var diffx=mouseX-_this.offsetLeft;
var diffy=mouseY-_this.offsetTop;
var _near=null;
_this.style['zIndex']=(++isZindex);
document.onmousemove=function(ev){
var oEvent=ev||event;
var oMouseX=oEvent.clientX;
var oMouseY=oEvent.clientY;
var ol=oMouseX-diffx;
var ot=oMouseY-diffy;
_this.style['left']=ol+"px";
_this.style['top']=ot+"px";
_near=near(_this,oUlLi);
for(var i=0;i<oUlLi.length;i++){
oUlLi[i].className="";
}
if(_near){
_near.className="active";
}
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
for(var i=0;i<oUlLi.length;i++){
oUlLi[i].className="";
}
var temp=_this.index;
if(_near){
(new Base(_this)).startMove({"left":liPosition[_near.index].left,"top":liPosition[_near.index].top},200);
_near.style['zIndex']=(++isZindex);
(new Base(_near)).startMove({"left": liPosition[temp].left,"top": liPosition[temp].top},200,"linear");
_this.index=_near.index;
_near.index=temp;
}else{
(new Base(_this)).startMove({"left": liPosition[temp].left,"top": liPosition[temp].top},200);
}
}
return false;
}
}
}
function near(obj,objList){
var divs=objList;
var nearObj=false;
var nearNum=9999999;
for(var i=0;i<divs.length;i++){
if(obj===divs[i]){
continue;
}
if(pz(obj,divs[i])){
var t=obj.offsetTop-divs[i].offsetTop;
var l=obj.offsetLeft-divs[i].offsetLeft;
//使用了勾股定理 两边的平方等于斜边的平方
var dis=Math.sqrt(l*l+t*t);
if(dis<nearNum){
nearNum=dis;
nearObj=divs[i];
}
}
}
return nearObj;
}
function pz(obj1,obj2){
var left1=obj1.offsetLeft;
var right1=obj1.offsetLeft+obj1.offsetWidth;
var top1=obj1.offsetTop;
var bottom1=obj1.offsetTop+obj1.offsetHeight;
var left2=obj2.offsetLeft;
var right2=obj2.offsetLeft+obj2.offsetWidth;
var top2=obj2.offsetTop;
var bottom2=obj2.offsetTop+obj2.offsetHeight;
//left1>left2 || right1>left2
//bottom1>top2
//如果第一个的右边大于第二个的左边 碰撞
//如果第二个的左边大于第二个的右边 过了，因此 left1<right2
/**
如果第一个的bottom大于第二个的top 则碰撞
如果第一个的top大于第二个的bottom 则过了 top1<bottom2
**/
if((right1>left2 && left1<right2) && (bottom1>top2 && top1<bottom2)){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<ul id="ul1">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
</ul>
</body>
</html>项目借助了 base.js
