<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>缓冲运动2</title> <style type="text/css"> a{display: block;} input[type='button']{ margin-top: 5px; } .div { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 200px; cursor: pointer; } .div2{ width: 1px; height: 1200px; position: absolute; left: 300px; top: 0; background-color: blueviolet; /*用这个标杆，发现div1并没有走到300的准确位置，原因是？*/ } </style> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ start(); } } function start(){ var oDiv = document.getElementById('div'); setInterval(function(){ var speed = Math.ceil((300-oDiv.offsetLeft)/10); //300,是自己定义的他要停止的位置值， //除以10 是必须的，这样就能有效地成倍地降低速度值，注意，更改10的值，可以更改速度，这个10所在分母位置的数值越大，速度越小。 // var speed = Math.ceil((300-oDiv.offsetLeft)/10); //如果整除不了，会有0.5px，有了小数点，计算机会直接删掉小数点后的数字，导致物体运动不到准确位置。所以最后，用math的ceil方法，向上取整；floor方法，向下取整。 //因为向左走向右走是不确定的，所以用三元判断的方法，如下： speed = speed>0?Math.ceil(speed):Math.floor(speed); //但凡遇到缓冲运动，一定要取整 oDiv.style.left = oDiv.offsetLeft+speed+'px'; document.title = oDiv.offsetLeft+','+speed;//用以检查、调试运动点是否正常 },30); } </script> </head> <body> <p>关键点：</p> <a>距离大，速度大</a>，，， <a>距离小，速度小</a> <a>距离和速度成正比</a> <p style="color: brown;">关键点:遇到“缓冲运动”，一定要取整</p> <input type="button" value="运动" id="btn" /> <div class="div" id="div"></div> <div class="div2"></div> </body> </html>
课程来源路径：智能社得开发课程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc