<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { padding: 0; margin: 0; } #div1 { width: 100px; height: 150px; background-color: #1B6D85; left:-100px; position: absolute; } #div1 span { width: 20px; height: 100px; line-height: 30px; background-color:#1B6D85; left:100px; top:20px; position: absolute; } </style> <script type="text/javascript"> window.onload = function() { var oDiv1 = document.getElementById(‘div1‘); oDiv1.timer = null; oDiv1.onmouseover = function() { startMove(this, 0); }; oDiv1.onmouseout = function() { startMove(this, -100); }; }; window.onscroll = function () { var oDiv1 = document.getElementById(‘div1‘); var ioffsetMiddle = document.documentElement.scrollTop || document.body.scrollTop; ioffsetMiddle = ioffsetMiddle + (document.documentElement.clientHeight - oDiv1.offsetHeight) / 2; //防止有小数，导致一直跳动 ioffsetMiddle = parseInt(ioffsetMiddle); startMiddle(oDiv1, ioffsetMiddle); }; function startMiddle(obj, iTarget) { clearInterval(obj.timerMiddle); obj.timerMiddle = setInterval(function () { var speed = (iTarget - obj.offsetTop) / 8; //如果大于零就取上，小于零就取下 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); document.getElementById(‘input1‘).value = iTarget + ‘-‘ + (obj.offsetTop + speed); if (obj.offsetTop == iTarget) { clearInterval(obj.timerMiddle); } else { obj.style.top = obj.offsetTop + speed + ‘px‘; } }, 10); } function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var speed = (iTarget - obj.offsetLeft) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (obj.offsetLeft == iTarget) { clearInterval(obj.timer); } else { obj.style.left = obj.offsetLeft + speed + ‘px‘; } }, 10); } </script> </head> <body style="height:2000px;"> <input type="text" id="input1"/> <div id="div1"> <span> 分享到 </span> </div> </body> </html>
原文：http://www.cnblogs.com/chao2014/p/5174802.html