js运动02----"分享到"侧边栏

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js运动02----"分享到"侧边栏相关的知识,希望对你有一定的参考价值。

1.分享到

通过目标值来确定方向!

<style>
        #div1{width: 100px;height: 200px;position: absolute;left: -100px;background-color: gray;}
        #div1 span{width: 20px;height: 60px;line-height: 20px;text-align:center;left: 100px;top: 70px; background-color: yellow;position: absolute;}
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById(‘div1‘);
            oDiv.onmouseover = function(){
                startMove(0);
            }
            oDiv.onmouseout = function(){
                startMove(-100);
            }
        }
        var timer = null;
        function startMove(iTarget){
            var oDiv = document.getElementById(‘div1‘);
            var iSpeed = 10 ;
            oDiv.offsetLeft < iTarget ? iSpeed = 10 : iSpeed = -10;
            clearInterval(timer);
            timer = setInterval(function(){
                if(oDiv.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft + iSpeed + ‘px‘;
                }
            },30);
        }
    </script>
</head>
<body>
<div id="div1">
    <span>分享到</span>
</div>
</body>

  

以上是关于js运动02----"分享到"侧边栏的主要内容,如果未能解决你的问题,请参考以下文章

css3使用transform属性制作js弹性运动

(43)JS运动之链式运动框架

js反弹运动

如何将 Facebook“分享”按钮添加到“快速查看”弹出模式?

jquery animate 运动速度由慢逐渐变快怎么实现

如何将网页分享到各大网站