<!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)畫(huà)：計(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)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
