<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> *{ margin:0; padding:0; } #box{ position:absolute; top:0; left:0; padding:0; width:100px; height:100px; background:lightblue; }</style> </head> <body> <div id='box'></div> <script>//思想1：var obox = document.getelementbyid('box');//实现一个匀速运动:在指定时间内完成动画：计算出总距离/总时间，然后求出对应的步长（每10ms走一步的话需要走多远）var maxleft = (document.documentelement.clientwidth || document.body.clientwidth) - obox.offsetwidth;var duration = 2000;var step = (maxleft/duration)*10;var timer = window.setinterval(function(){var curleft = utils.css(obox,left); curleft+=step;if(curleft>=maxleft){ window.clearinterval(timer);return; } utils.css(obox,left,curleft); },10)//思想2：function linear(t,b,c,d){//相对应的是time begin change durationreturn c*t/d+b }var obox = document.getelementbyid('box');var target = (document.documentelement.clientwidth || document.body.clientwidth) - obox.offsetwidth;var begin = utils.css(obox,'left'),change = target-begin;var duration = 2000,time = null;var timer = window.setinterval(function(){ time+=10;if(time>=duration){ utils.css(obox,left,target); window.clearinterval(timer);return; }var curpos = linear(time,begin,change,duration); utils.css(obox,left,curpos) },10)</script> </body> </html>
以上就是js动画之在指定时间内实现单方向匀速运动的详细内容。