* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: #0FF;
position: relative;
left: -200px;
top: 0;
}
#div1 span {
width: 20px;
height: 50px;
background: #CCC;
position: absolute;
color:red;
/*font:normal 20px/0.5em 'microsoft yahei';*/
left: 200px;
top: 75px;
}
window.οnlοad=function(){
var Odiv = document.getElementById('div1');
Odiv.οnmοuseοver=function(){
startMove(0);
}
Odiv.οnmοuseοut=function(){
startMove(-200);
}
}
var timer=null;
function startMove(iTarget){
window.clearInterval(timer);
var Odiv = document.getElementById('div1');
var Ospan = document.getElementById('span');
timer=window.setInterval(function(){
var speed = 0;
if(Odiv.offsetLeft>iTarget){
speed=-10;
Ospan.innerHTML='向左';
}else{
speed=10;
Ospan.innerHTML='向右';
}
if(Odiv.offsetLeft==iTarget){
window.clearInterval(timer);
Ospan.innerHTML='分享';
}else{
Odiv.style.left=Odiv.offsetLeft+speed+'px';
}
},30);
}