<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>缓冲运动2</title> <style type="text/css"> body{ height: 2000px; } .div { width: 100px; height: 100px; background-color: darkslateblue; position: absolute; right: 0; /*bottom: 0;*/ cursor: pointer; } </style> <script type="text/javascript"> window.onscroll= function(){ //1,给浏览器的滚动添加事件，onscollTop事件 var oDiv = document.getElementById('div'); var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; // oDiv.style.top = (document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'; //可视区域的高度减掉物体高度再加上向上滚动的高度 starMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop)); //除以2以后就一直抖,就用parseInt取整 }; var timer = null; function starMove(iTarget){ var oDiv = document.getElementById('div'); clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget-oDiv.offsetTop)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetTop==iTarget){ clearInterval(timer) }else{ document.title = iTarget; document.getElementById('btn').value=oDiv.offsetTop; oDiv.style.top = oDiv.offsetTop+speed+'px'; } },30) } </script> </head> <body> <div class="div" id="div"></div> <input type="text" value="" id="btn" style="top: 0; right: 0; position: fixed;"/> </body> </html>
课程链接：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc