js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
更新時(shí)間：2015年04月10日 09:55:05 作者：jingangel
這篇文章主要介紹了js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法,涉及javascript操作元素運(yùn)動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法。分享給大家供大家參考。具體分析如下：
該實(shí)例可實(shí)現(xiàn)一開始速度很快，然后慢下來(lái)，直到停止的效果。
要點(diǎn)：
var speed = (target-box.offsetLeft)/8;
目標(biāo)點(diǎn)減去元素的當(dāng)前位置的值除以8,因?yàn)閛ffsetleft的值是一直在變大，所以速度的值也是一直的變小
speed = speed>0?Math.ceil(speed):Math.floor(speed);
正向速度的時(shí)候向上取整，反向速度的時(shí)候向下取整
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無(wú)標(biāo)題文檔</title>
<style>
<!--
body{margin:0; padding:0; font:12px/1.5 arial;}
#box{width:100px; height:100px; position:absolute;
background:#06c; left:0;}
-->
</style>
<script>
<!--
window.onload = function(){
var box = document.getElementById("box");
var btn = document.getElementById("btn");
var timer=null;
btn.onclick = function(){
startrun(300);
}
function startrun(target){
clearInterval(timer);
timer = setInterval(function(){
var speed = (target-box.offsetLeft)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(box.offsetLeft == target){
clearInterval(timer);
}else{
box.style.left = box.offsetLeft+speed+"px";
}
document.getElementById('abc').innerHTML+=box.offsetLeft+','+speed+'<br>';
},30);
}
}
//-->
</script>
</head>
<body>
<input id="btn" type="submit" value="向右運(yùn)動(dòng)">
<div id="box">
</div>
<br>
<textarea id="abc" cols="50" rows="10"
style="margin-top:130px"></textarea>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄
最近學(xué)到了一個(gè)比較好用的框架uni-app,可以做六端適配,學(xué)習(xí)一下,下面這篇文章主要給大家介紹了關(guān)于uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄的相關(guān)資料,需要的朋友可以參考下2023-03-03
一個(gè)基于JavaScript的代碼編輯器，CodeMirror支持大量語(yǔ)言的語(yǔ)法高亮,也包括css,html,js等的高亮顯示。此外，CodeMirror還支持代碼自動(dòng)完成、搜索/替換、HTML預(yù)覽、行號(hào)、選擇/搜索結(jié)果高亮、可視化tab、代碼自動(dòng)格式等2017-03-03
自適應(yīng)高度框架 ----屬個(gè)人收藏內(nèi)容
自適應(yīng)高度框架 ----屬個(gè)人收藏內(nèi)容...2007-01-01
淺談Javascript鼠標(biāo)和滾輪事件,鼠標(biāo)事件也許是web頁(yè)面當(dāng)中最常用到的事件，因?yàn)槭髽?biāo)是最常用的導(dǎo)航設(shè)備2012-06-06
關(guān)于JAVASCRIPT urldecode URL解碼的問(wèn)題
JS要實(shí)現(xiàn)單純的編碼解碼輕而易舉，escape、unescape就搞定，但是遇到不是完整的URL轉(zhuǎn)碼，就沒(méi)辦法了2012-01-01
JavaScript編寫檢測(cè)用戶所使用的瀏覽器的代碼示例
這篇文章主要介紹了JavaScript編寫檢測(cè)用戶所使用的瀏覽器的代碼示例,這樣就可以根據(jù)用戶的瀏覽狀態(tài)來(lái)調(diào)整桌面版移動(dòng)版或者兼容性的頁(yè)面,需要的朋友可以參考下2016-05-05
GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
詳解JavaScript正則表達(dá)式之分組匹配及反向引用
這篇文章主要介紹了詳解JavaScript正則表達(dá)式之分組匹配及反向引用 的相關(guān)資料,需要的朋友可以參考下2016-03-03
匯編語(yǔ)言還是在大學(xué)的時(shí)候?qū)W的，匯編語(yǔ)言有個(gè)特點(diǎn)是語(yǔ)句短、條數(shù)多，很難可以把全部指令都背熟。本文就來(lái)用JavaScript編寫一個(gè)8086匯編指令查詢工具，希望對(duì)大家有所幫助2023-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript類的寫法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09