<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
#div1{width:100px;height:300px;background:red;position:absolute;left:-100px;top:100px;}
#div2{width:30px;height:50px;background:green;position:absolute;top:50%;right:-30px;margin-top:-25px;}
</style>
<script type="text/javascript">
var time=null;
var tii=null;
window.onload=function()
{
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
oDiv1.onmousemove=function()//当鼠标移上去的时候
{
shou(0)
};
oDiv1.onmouseout=function()//当鼠标离开的时候
{
shou(-100)
};
};
function shou(name)
{
var oDiv1=document.getElementById('div1');//获得div
clearInterval(time);//关闭定时器
var ip=0;//div移动的速度
if(oDiv1.offsetLeft<=name)//当它小于零时，速度值为整数
{
ip=10;
}
else//当它大于等于零时速度值为负数
{
ip=-10;
}
time=setInterval(function()//开启定时器
{
if(oDiv1.offsetLeft==name)//当left值等于参数（0或-100）
{
clearInterval(time);//关闭定时器
}
else//否则把速度值累加到div上
{
oDiv1.style.left=oDiv1.offsetLeft+ip+'px';
}
},50)
}
</script>
</head>
<body style="height:2000px;">
<div id="div3"></div>
<div id="div1">
<div id="div2">客<br/>服</div>
</div>
</body>
</html>
View Code
