匀速运动实例---分享到

weixin_30457065

于 2015-05-12 21:51:00 发布

阅读量61

点赞数

原文链接：http://www.cnblogs.com/gcczhongduan/p/4498743.html

版权

*****************分享到1**************************

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{width:100px;height:400px;background:#404144;position: absolute;left:-100px;}
span{width:20px;background: rosybrown;position:absolute;left:100px;top:150px;text-align: center;}
</style>
<script type="text/javascript">
window.οnlοad=function()
{
var oDiv=document.getElementsByTagName("div")[0];
oDiv.οnmοuseοver=function()
{
startMove(10,0);
};
oDiv.οnmοuseοut=function()
{
startMove(-10,-100);
}
};
var timer=null;//必须全局
function startMove(iSpeed,iTarget)
{
var oDiv=document.getElementsByTagName("div")[0];
var Speed=iSpeed;
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==iTarget){clearInterval(timer);}
else{oDiv.style.left=oDiv.offsetLeft+Speed+"px";}

},30)
}
</script>
</head>
<body>
<div>
<span>分享到</span>
</div>
</body>
</html>

*****************分享到2**************************

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{width:100px;height:400px;background:#404144;position: absolute;left:-100px;}
span{width:20px;background: rosybrown;position:absolute;left:100px;top:150px;text-align: center;}
</style>
<script type="text/javascript">
window.οnlοad=function()
{
var oDiv=document.getElementsByTagName("div")[0];
oDiv.οnmοuseοver=function()
{
startMove(oDiv,10,0);
};
oDiv.οnmοuseοut=function()
{
startMove(oDiv,-10,-100);
}
};
var timer=null;//必须全局
function startMove(obj,iSpeed,iTarget)
{
// var oDiv=document.getElementsByTagName("div")[0];
var Speed=iSpeed;
clearInterval(timer);
timer=setInterval(function(){
if(obj.offsetLeft==iTarget){clearInterval(timer);}
else{obj.style.left=obj.offsetLeft+Speed+"px";}

},30)
}
</script>
</head>
<body>
<div>
<span>分享到</span>
</div>
</body>
</html>

*******************分享到3***************************

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{width:100px;height:400px;background:#404144;position: absolute;left:-100px;}
span{width:20px;background: rosybrown;position:absolute;left:100px;top:150px;text-align: center;}
</style>
<script type="text/javascript">
window.οnlοad=function()
{
var oDiv=document.getElementsByTagName("div")[0];
oDiv.οnmοuseοver=function()
{
startMove(oDiv,0);
};
oDiv.οnmοuseοut=function()
{
startMove(oDiv,-100);
}
};
var timer=null;//必须全局
function startMove(obj,iTarget) //能用的情况下能少就少
{
//var oDiv=document.getElementsByTagName("div")[0];//已经通过參数传进来了全部无需再获取
var Speed=0;
if(obj.offsetLeft<iTarget){Speed=10}
else{Speed=-10;}
clearInterval(timer);
timer=setInterval(function(){
if(obj.offsetLeft==iTarget){clearInterval(timer);}
else{obj.style.left=obj.offsetLeft+Speed+"px";}

},30)
}
</script>
</head>
<body>
<div>
<span>分享到</span>
</div>
</body>
</html>