JS實(shí)現(xiàn)的緩沖運(yùn)動效果示例
本文實(shí)例講述了JS實(shí)現(xiàn)的緩沖運(yùn)動效果。分享給大家供大家參考,具體如下:
緩沖需要用到數(shù)值取整,向上取整:Math.ceil()
向下取整Math.floor()
移動的速度慢慢減慢的效果,移動速度=(終點(diǎn)位置 - 當(dāng)前位置) / 一個(gè)數(shù)
<!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=utf-8" /> <title>www.dbjr.com.cn JS緩沖運(yùn)動</title> <style> #div{ width:150px; height:150px; background:#0C6; position:absolute; left:0; top:50px; } #div2{ background:#000; height:600px; position:absolute; left:500px; width:2px; } </style> </head> <script> var speed; var time; window.onload = function(){ var btn = document.getElementById('btn'); btn.onclick = function(){ speed = 0; move(500); }; btn2.onclick = function(){ speed = 0; move(0); }; }; function move(e){ var div = document.getElementById('div'); clearInterval(time); time = setInterval(function(){ //改變位置,如果向左則e==500, 向上取整, 否則向右,向下取整,速度=(終點(diǎn)位置 - 當(dāng)前位置)/一個(gè)數(shù) e==500 ? speed = Math.ceil((e-(div.offsetLeft))/30):speed = Math.floor((e-(div.offsetLeft))/30) if (e <= div.style.left){//達(dá)到,關(guān)閉定時(shí)器 clearInterval(time); } else { div.style.left = div.offsetLeft+speed+'px'; } },30); }; </script> <body> <input type="button" value="向右運(yùn)動" id="btn" /> <input type="button" value="向左運(yùn)動" id="btn2" /> <div id = "div"> </div> <div id = "div2"> </div> </body> </html>
點(diǎn)擊此處查看在線演示效果。
或者使用本站在線HTML/js運(yùn)行工具測試查看運(yùn)行效果:http://tools.jb51.net/code/HtmlJsRun
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript運(yùn)動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)緩沖運(yùn)動效果的方法
- JS實(shí)現(xiàn)多物體緩沖運(yùn)動實(shí)例代碼
- JS多物體 任意值 鏈?zhǔn)?緩沖運(yùn)動
- JavaScript緩沖運(yùn)動實(shí)現(xiàn)方法(2則示例)
- JavaScript實(shí)現(xiàn)跟隨滾動緩沖運(yùn)動廣告框
- JS多物體實(shí)現(xiàn)緩沖運(yùn)動效果示例
- javascript 緩沖運(yùn)動框架的實(shí)現(xiàn)
- JavaScript中的勻速運(yùn)動和變速(緩沖)運(yùn)動詳細(xì)介紹
- JS實(shí)現(xiàn)物體帶緩沖的間歇運(yùn)動效果示例
- JS實(shí)現(xiàn)運(yùn)動緩沖效果的封裝函數(shù)示例
相關(guān)文章
layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改)
今天小編就為大家分享一篇layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js基礎(chǔ)之DOM中document對象的常用屬性方法詳解
下面小編就為大家?guī)硪黄猨s基礎(chǔ)之DOM中document對象的常用屬性方法詳解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10JS簡單實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JS簡單實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)組遍歷、判斷實(shí)現(xiàn)去重復(fù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-10-10JS函數(shù)參數(shù)的傳遞與同名參數(shù)實(shí)例分析
這篇文章主要介紹了JS函數(shù)參數(shù)的傳遞與同名參數(shù),結(jié)合實(shí)例形式分析了JS函數(shù)參數(shù)的傳遞與同名參數(shù)相關(guān)原理、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03微信小程序開發(fā)的四十個(gè)技術(shù)竅門總結(jié)(推薦)
這篇文章主要給大家介紹了微信小程序開發(fā)的四十個(gè)技術(shù)竅門的相關(guān)資料,相信對大家的學(xué)習(xí)或者使用微信小程序具有一定的參考借鑒價(jià)值,所以特別推薦給大家,需要的朋友們可以一起來看看吧。2017-01-01JS限制Textarea文本域字符個(gè)數(shù)的具體實(shí)現(xiàn)
這篇文章介紹了JS限制Textarea文本域字符個(gè)數(shù)的具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-08-08