html里水平运动实现,JavaScript动画--水平运动

水平运动

* {

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);

}

分享