我想做出一种将层放到另一个层上时~~是慢慢的移动过去,不是一下就跳过去的效果
<html>
<head>
<title>无标题文档</title>
<script type="text/javascript">
var ii=0;
var jj=0;
var time = null;
function handleMouse(e){
var d = document.getElementById('pc');
d.style.left = e.clientX - ii;
d.style.top = e.clientY - jj;
}
function handleDown(e){
var b = document.body;
var d = document.getElementById('pc');
ii = e.clientX - d.offsetLeft;
jj = e.clientY - d.offsetTop;
b.attachEvent("onmousemove",handleMouse);
b.attachEvent("onmouseup",handleUp);
}
function handleUp(){
document.body.detachEvent("onmousemove",handleMouse);
document.body.detachEvent("onmouseup",handleUp);
if(Targets(event.clientX,event.clientY)){
var tar = document.getElementById('dis');
var d = document.getElementById('pc');
if(d.style.Left != tar.offsetLeft || d.style.Top != tar.offsetTop){
time = setInterval(move,1000);
}
else{
clearInterval(time);
d.style.Left = tar.offsetLeft;
d.style.Top = tar.offsetTop;
}
}
}
function move(){
var tar = document.getElementById('dis');
var d = document.getElementById('pc');
d.style.pixelLeft -= 10;
d.style.left -= 10;
d.style.pixelTop -= 10;
d.style.top -= 10;
}
function Targets(ix,iy){
var tar = document.getElementById('dis');
var i1 = tar.offsetLeft;
var i2 = tar.offsetWidth + i1;
var j1 = tar.offsetTop;
var j2 = tar.offsetHeight + j1;
return (ix >= i1 && ix <= i2 && iy >= j1 && iy <= j2);
}
function check(){
var d = document.getElementById('pc');
alert(d.offsetHeight);
}
</script>
<style>
img{
border: 1px solid #000000;
}
#pc{
width:140px;
height:105px;
position:absolute;
z-index:1;
}
</style>
</head>
<body>
<div id="pc" onMouseDown="handleDown(event)"></div>
<div id="dis" style="background-color:#000000; position:absolute; width:300; height:300px; margin-left:150px;"></div>
</body>
</html>
