首页 > 代码库 > js运动02----"分享到"侧边栏

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----"分享到"侧边栏