快捷導(dǎo)航

JS勻速運(yùn)動(dòng)演示示例代碼

更新時(shí)間：2013年11月26日 16:38:28 作者：

勻速運(yùn)動(dòng)的效果想必大家都有見到過吧，在本文為大家介紹下使用JS是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>勻速運(yùn)動(dòng)演示</title> 
<style type="text/css"> 
<!-- 

#div1 {width:1px;height:200px;background-color: black;position:absolute;left:100px;top:70px;float:left} 
#div1 span {position:absolute;top:-15px} 
#div2 {width:1px;height:200px;background-color:midnightblue;position:absolute;left:800px;top:70px;float: left} 
#div2 span {position:absolute;top:-15px} 
#div3 {width:1px;height:200px;background-color:fuchsia;position:absolute;left:300px;top:70px;float: left} 
#div3 span {position:absolute;top:-15px} 
#div4 {width:1px;height:200px;background-color:darkmagenta;position:absolute;left:500px;top:70px;float: left} 
#div4 span {position:absolute;top:-15px} 
#grap {width:200px;height:200px;background:red;position:absolute;left:300px;top:74px;float: left;} 
input {width:100px;margin-left: 90px;} 
--> 
</style> 
<script type="text/javascript"> 
var timeId 
function startMove(target){ 
var oDiv=document.getElementById('grap') 
clearInterval(timeId); //這個(gè)地方就是為了防止多次點(diǎn)擊速度加快的現(xiàn)象，很重要 
speed=oDiv.offsetLeft<target?8:-9; 
timeId=setInterval(function(){ 
if(Math.abs(oDiv.offsetLeft-target)<=6){ 
oDiv.style.left=target+'px'; //只要矩形移動(dòng)到接近到目標(biāo)點(diǎn)處就直接移動(dòng)到目標(biāo)點(diǎn)上，肉眼無法察覺速度變化 
clearInterval(timeId); document.title="目標(biāo)"+oDiv.style.left; 
} 
else{ 
oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
} 
},30); 
} 
</script> 
</head> 
<body> 
<div id="div1"><span>100px</span></div> 
<div id="div2"><span>800px</span></div> 
<div id="div3"><span>300px</span></div> 
<div id="div4"><span>500px</span></div> 
<input type="button" value="移動(dòng)到100px處" onclick="startMove(100)"/> 
<input type="button" value="移動(dòng)到300px處" onclick="startMove(300)"/> 
<input type="button" value="移動(dòng)到500px處" onclick="startMove(500)"/> 
<input type="button" value="移動(dòng)到800px處" onclick="startMove(800)"/> 
<div id="grap" ></div> 

</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

JS匿名函數(shù)實(shí)例分析
這篇文章主要介紹了JS匿名函數(shù),結(jié)合實(shí)例形式分析了javascript匿名函數(shù)的定義、參數(shù)、返回值等相關(guān)使用方法,需要的朋友可以參考下
2016-11-11
TypeScript中類型兼容性的示例詳解
JavaScript是一門弱類型語言，它對類型是弱校驗(yàn)，所以才有了TypeScript。本文就來和大家一起看看TypeScript的類型兼容性的概念和分類，需要的可以參考一下
2022-08-08
javascript canvas封裝動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript canvas封裝動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
一個(gè)用js實(shí)現(xiàn)過濾重復(fù)字符的函數(shù)
一個(gè)用js實(shí)現(xiàn)過濾重復(fù)字符的函數(shù)...
2007-08-08
JavaScript實(shí)現(xiàn)將Excel文件渲染在頁面上
這篇文章主要為大家詳細(xì)介紹了如何使用Html和JavaScript實(shí)現(xiàn)將Excel文件渲染在頁面上,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下
2024-12-12
微信小程序?qū)崿F(xiàn)選擇地址省市區(qū)三級聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選擇地址省市區(qū)三級聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁面效果(類似360默認(rèn)頁面滾動(dòng)切換效果)
這篇文章主要介紹了js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁面效果,類似360默認(rèn)頁面滾動(dòng)切換效果.涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁面元素的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
JavaScript?中的異步?forEach
這篇文章主要介紹了JavaScript異步forEach的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
JavaScript代碼因逗號不規(guī)范導(dǎo)致IE不兼容的問題
這篇文章主要介紹了JavaScript代碼因逗號不規(guī)范導(dǎo)致IE不兼容的問題的相關(guān)資料,需要的朋友可以參考下
2016-02-02