首页 > 代码库 > 匀速运动实例---分享到

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

*****************分享到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.onload=function()
        {
            var oDiv=document.getElementsByTagName("div")[0];
            oDiv.onmouseover=function()
            {
                startMove(10,0);
            };
            oDiv.onmouseout=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.onload=function()
        {
            var oDiv=document.getElementsByTagName("div")[0];
            oDiv.onmouseover=function()
            {
                startMove(oDiv,10,0);
            };
            oDiv.onmouseout=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.onload=function()
        {
            var oDiv=document.getElementsByTagName("div")[0];
            oDiv.onmouseover=function()
            {
                startMove(oDiv,0);
            };
            oDiv.onmouseout=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>

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