<head>
<style type="text/css">
#div1{width: 100px;
height: 300px;
border: solid 1px greenyellow;
position: absolute;
background: greenyellow;
top: 30%;
left: -100px;
} //position为div的绝对位置
#div1 span{
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background: deepskyblue;
right: -20px;
top: 100px;
}
</style>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.οnlοad=function(){
var odiv=document.getElementById('div1'); //获取元素;
odiv.οnmοuseοver=function(){
startmove(10,0); //10和0为starmove的speed和itarge参数;
};
odiv.οnmοuseοut=function(){
startmove(-10,-100);
};
};
var timer=null; //创建一个变量;
function startmove(speed,itarge){
var odiv=document.getElementById('div1');
clearInterval(timer); //关闭时间间隔;
//设置时间间隔
timer=setInterval(function(){
if(odiv.offsetLeft==itarge){
clearInterval(timer);
}else{
odiv.style.left=odiv.offsetLeft+speed+'px';
}
},30)
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>