右侧客服 运动案例
<style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 3000px; } #box{ width: 100px; height: 150px; background: red; position: absolute; right: 0; top: 50%; } </style>
<div id="box"></div> <script src="js/move.js"></script> <script type="text/javascript"> window.onscroll = function(){ var box = document.getElementById("box"); var screenHeight = document.documentElement.clientHeight || document.body.scrollTop; var boxHei = box.offsetHeight; var oTop =(screenHeight - boxHei)/2; var nowScroll = document.documentElement.scrollTop || document.body.scrollTop; var nowTop = parseInt(oTop+nowScroll); move(nowTop); } var time; function move(iTarget) { var box = document.getElementById("box"); clearInterval(time); time = setInterval(function(){ var speed = (iTarget - box.offsetTop)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(box.offsetTop == iTarget) { clearInterval(time); }else{ box.style.top = box.offsetTop + speed + "px"; } },30) } </script>
move.js
//一次改進版 //function move(obj, attr, end, start, stepNum) { // // var speed = (end - start) / stepNum; // this.time = setInterval(function() { // start += speed; // if (start >= end && speed > 0) { // clearInterval(this.time); // start = end; // } // if (start <= end && speed < 0) { // clearInterval(this.time); // start = end; // } // obj.style[attr] = start + "px"; // }, 10) //} function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] }else{ return getComputedStyle(obj)[attr]; } } //二次改進版 function move(obj, attr, end,stepNum,fn) { var start = parseInt(getStyle(obj,attr)); var speed = (end - start) / stepNum; clearInterval(obj.time); obj.time = setInterval(function() { start += speed; if (start >= end && speed > 0) { clearInterval(obj.time); start = end; if(fn){ fn(); } } if (start <= end && speed < 0) { clearInterval(obj.time); start = end; if(fn) { fn(); } } obj.style[attr] = start + "px"; }, 10) }
利用jq实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-2.2.1.js"></script> <style> #box{ width:100px; height:100px; background-color:red; position:absolute; left: 0; top:50%; transform:translateY(-50px); } </style> </head> <body style="height:2000px"> <div id="box"> </div> <script> $(function(){ var defaul = $('#box'); var defaultTop = defaul.offset().top $(window).on('scroll',function(){src()}); function src(){ var offsetTop = defaultTop + $(window).scrollTop()+"px"; defaul.animate({top:offsetTop}, { duration:600, queue:false }) } }) </script> </body> </html>