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----"分享到"侧边栏的主要内容,如果未能解决你的问题,请参考以下文章