<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片交换</title>
<style type="text/css">
.all{
position:relative;
height:600px;
800px;
margin:0 auto;
}
.top{
position:relative;
800px;
height:200px;
}
.center{
position:relative;
800px;
height:200px;
}
.bottom{
position:relative;
800px;
height:200px;
}
.top1{
position:absolute;
left:0px;
top:0px;
200px;
height:200px;
background-color:#00CC66;
float:left;
background-image:url(1.jpg);
}
.top2{
position:absolute;
left:200px;
top:0px;
200px;
height:200px;
background-color:#6600FF;
float:left;
background-image:url(2.jpg);
}
.top3{
position:absolute;
left:400px;
top:0px;
200px;
height:200px;
background-color:#FF00FF;
float:left;
background-image:url(3.jpg);
}
.top4{
position:absolute;
left:600px;
top:0px;
200px;
height:200px;
background-color:#66FF00;
float:left;
background-image:url(4.jpg);
}
.center1{
position:absolute;
left:0px;
top:0px;
200px;
height:200px;
background-color:#000000;
float:left;
background-image:url(5.jpg);
}
.center2{
position:absolute;
left:200px;
top:0px;
200px;
height:200px;
background-color:#6600CC;
float:left;
background-image:url(6.jpg);
}
.center3{
position:absolute;
left:400px;
top:0px;
200px;
height:200px;
background-color:#666666;
float:left;
background-image:url(7.jpg);
}
.center4{
position:absolute;
left:600px;
top:0px;
200px;
height:200px;
background-color:#CCCC33;
float:left;
background-image:url(8.jpg);
}
.bottom1{
position:absolute;
left:0px;
top:0px;
200px;
height:200px;
background-color:#CCCC33;
float:left;
background-image:url(9.jpg);
}
.bottom2{
position:absolute;
left:200px;
top:0px;
200px;
height:200px;
background-color:#FFFF00;
float:left;
background-image:url(10.jpg);
}
.bottom3{
position:absolute;
left:400px;
top:0px;
200px;
height:200px;
background-color:#00CC00;
float:left;
background-image:url(11.jpg);
}
.bottom4{
position:absolute;
left:600px;
top:0px;
200px;
height:200px;
background-color:#CC33FF;
float:left;
background-image:url(12.jpg);
}
</style>
</head>
<body>
<div class="all">
<div class="top">
<div class="top1" id="top11"></div>
<div class="top2" id="top22"></div>
<div class="top3" id="top33"></div>
<div class="top4" id="top44"></div>
</div>
<div class="center">
<div class="center1" id="center11"></div>
<div class="center2" id="center22"></div>
<div class="center3" id="center33"></div>
<div class="center4" id="center44"></div>
</div>
<div class="bottom">
<div class="bottom1" id="buttom11"></div>
<div class="bottom2" id="buttom22"></div>
<div class="bottom3" id="buttom33"></div>
<div class="bottom4" id="buttom44"></div>
</div>
</div>
<script type="text/javascript">
var tx=0,ty=0;
var x=0,y=0;
var isdrag=false;
var objectPic;
var objectPicId;
var replacedObject;
var replacedObjectId;
//保留对象的原始坐标
var objectOldX,objectOldY;
//设置显示的优先级
var indexFlag=1;
//对象的坐标
var relativeX,relativeY;
//移动方向的div中点坐标；
var centerX,centerY;
//重定位div的坐标，此函数有错误待修改
function change(){
objectPic.style.position="fixed";
objectPic.style.zIndex=indexFlag+1;
indexFlag++;
objectPic.style.left=centerX-100+274.5+"px";
objectPic.style.top=centerY-100+8+"px";
selectreplacedObject();
objectPic.setAttribute("id",replacedObjectId);
replacedObject=document.getElementById(replacedObjectId);
replacedObject.style.position="fixed";
replacedObject.style.zIndex=indexFlag+1;
replacedObject.setAttribute("id",objectPicId);
indexFlag++;
replacedObject.style.left=objectOldX+274.5+"px";
replacedObject.style.top=objectOldY+8+"px";
}
function noChange(){
objectPic.style.left=tx+"px";
objectPic.style.top=0+"px";
}
function selectreplacedObject(){
if(centerY==100){
if(centerX==100){
replacedObjectId="top11";
}else{
if(centerX==300){
replacedObjectId="top22";
}else{
if(centerX==500){
replacedObjectId="top33";
}else{
replacedObjectId="top44";
}
}
}
}else{
if(centerY==300){
if(centerX==100){
replacedObjectId="center11";
}else{
if(centerX==300){
replacedObjectId="center22";
}else{
if(centerX==500){
replacedObjectId="center33";
}else{
replacedObjectId="center44";
}
}
}
}else{
if(centerX==100){
replacedObjectId="bottom11";
}else{
if(centerX==300){
replacedObjectId="bottom22";
}else{
if(centerX==500){
replacedObjectId="bottom33";
}else{
replacedObjectId="bottom44";
}
}
}
}
}//配对最外边的else
}
//此方法用于判断两个div的覆盖面积是否超过一半；
function isChange(){
var distanceX=-Math.abs(relativeX+100-centerX);
var distanceY=-Math.abs(relativeY+100-centerY);
var flag=(distanceX+200)*(distanceY+200);
if(flag>200*200*0.5){
return true;
}else{
return false;
}
}
//此方法用来获得图片的移动方向；
function selectPoint(pointX,pointY){
var minX,minY;
var maxX,maxY;
var i,j;
minX=pointX-100;
minY=pointY-100;
maxX=pointX+100;
maxY=pointY+100;
for(i=Math.round(minX);i<maxX;i++){
if((i%100==0)&&(i%200==100)){
centerX=i;
break;
}
}
if(centerX==i){
for(j=Math.round(minY);j<maxY;j++){
if((j%100==0)&&(j%200==100)){
centerY=j;
break;
}
}
}
return false;
}
function mousedown(e){
var targetPic=e.target;
var strClassName=targetPic.className;
if(strClassName=="top1"||strClassName=="top2"||strClassName=="top3"||strClassName=="top4"||strClassName=="center1"||strClassName=="center2"||strClassName=="center3"||strClassName=="center4"||strClassName=="bottom1"||strClassName=="bottom2"||strClassName=="bottom3"||strClassName=="bottom4"){
selectMouse(e,strClassName);
return false;
}
}
function moveMouse(e){
if(isdrag){
objectPic.style.left=tx+e.clientX-x+"px";
objectPic.style.top =ty+e.clientY-y+"px";
//获得对象的坐标
relativeX=objectPic.getBoundingClientRect().left-274.5;
relativeY=objectPic.getBoundingClientRect().top-8;
selectPoint(relativeX+100,relativeY+100);
return false;
}
}
function selectMouse(e,param){
var temPic=e.target;
var topElement="HTML";
while(temPic.tagName!=topElement && temPic.className!=param){
temPic=temPic.parentNode;
}
if(temPic.className==param){
objectPic=temPic;
objectPic.style.zIndex=indexFlag+1;
indexFlag++;
//获得对象的原始坐标
objectPicId=objectPic.id;
objectOldX=objectPic.getBoundingClientRect().left-274.5;
objectOldY=objectPic.getBoundingClientRect().top-8;
if(parseInt(objectPic.style.left+0)==0){
tx=objectPic.getBoundingClientRect().left-274.5;
}else{
tx=parseInt(objectPic.style.left+0);
}
ty=parseInt(objectPic.style.top+0);
x=e.clientX;
y=e.clientY;
isdrag=true;
document.onmousemove=moveMouse;
return false;
}
}
function mouseup(){
isdrag=false;
var isflag=isChange();
if(isflag){
change();
}else
{
noChange();
}
}
document.onmousedown = mousedown;
document.onmouseup=mouseup;
</script>
</body>
</html>