js動(dòng)畫之在指定時(shí)間內(nèi)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:16:24

js動(dòng)畫之在指定時(shí)間內(nèi)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)

js動(dòng)畫之在指定時(shí)間內(nèi)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng):具體代碼如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; p

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js動(dòng)畫之在指定時(shí)間內(nèi)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng):具體代碼如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; p

具體代碼如下

<!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');//實(shí)現(xiàn)一個(gè)勻速運(yùn)動(dòng):在指定時(shí)間內(nèi)完成動(dòng)畫：計(jì)算出總距離/總時(shí)間，然后求出對(duì)應(yīng)的步長(zhǎng)（每10ms走一步的話需要走多遠(yuǎn)）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){//相對(duì)應(yīng)的是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>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js動(dòng)畫之在指定時(shí)間內(nèi)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：動(dòng)畫實(shí)現(xiàn) js

熱門焦點(diǎn)

js動(dòng)畫之在指定時(shí)間內(nèi)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)

js動(dòng)畫之在指定時(shí)間內(nèi)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)

js動(dòng)畫之在指定時(shí)間內(nèi)實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)

最新推薦

猜你喜歡

熱門推薦