javascript彈性運(yùn)動(dòng)效果簡(jiǎn)單實(shí)現(xiàn)方法
更新時(shí)間：2016年01月08日 14:10:27 作者：lostyu
這篇文章主要介紹了javascript彈性運(yùn)動(dòng)效果簡(jiǎn)單實(shí)現(xiàn)方法,實(shí)例分析了JavaScript實(shí)現(xiàn)彈性運(yùn)動(dòng)的原理,涉及JavaScript數(shù)學(xué)運(yùn)算與時(shí)間函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下
本文實(shí)例講述了javascript彈性運(yùn)動(dòng)效果簡(jiǎn)單實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
彈性運(yùn)動(dòng)實(shí)現(xiàn)原理：加速運(yùn)動(dòng)+減速運(yùn)動(dòng)+摩擦運(yùn)動(dòng)
運(yùn)行效果截圖如下：
實(shí)例代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
iSpeed += (iTarget - obj.offsetLeft)/5;
iSpeed *= 0.7;
left += iSpeed;
if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
clearInterval(obj.timer);
obj.style.left = iTarget + 'px';
}else{
obj.style.left = obj.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="運(yùn)動(dòng)" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
</body>
</html>
更多關(guān)于JavaScript運(yùn)動(dòng)效果相關(guān)內(nèi)容可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法分析
- JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn)小結(jié)(附彈性運(yùn)動(dòng)示例)
- JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)例分析
- 純js模擬div層彈性運(yùn)動(dòng)的方法
- JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果
- JS+CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條效果
- CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- javascript實(shí)現(xiàn)的鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條
- 仿客齊集首頁(yè)導(dǎo)航條DIV+CSS+JS [代碼實(shí)例]
- js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)的導(dǎo)航條
相關(guān)文章
使用戶點(diǎn)擊后退按鈕使效三行代碼...2007-07-07
JavaScript new對(duì)象的四個(gè)過(guò)程實(shí)例淺析
這篇文章主要介紹了JavaScript new對(duì)象的四個(gè)過(guò)程,結(jié)合實(shí)例形式簡(jiǎn)單分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中new對(duì)象的四個(gè)過(guò)程相關(guān)原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)側(cè)滑刪除功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JS+CSS實(shí)現(xiàn)簡(jiǎn)易的滑動(dòng)門效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)簡(jiǎn)易的滑動(dòng)門效果代碼,涉及JavaScript動(dòng)態(tài)遍歷及修改頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
基于JS定義回車事件的實(shí)現(xiàn)代碼，需要的朋友可以參考下2013-07-07
MVVM框架下實(shí)現(xiàn)分頁(yè)功能示例
分頁(yè)這種組件，幾乎每一種框架都有這樣的組件，這篇文章主要介紹了MVVM框架下實(shí)現(xiàn)分頁(yè)功能示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
js實(shí)現(xiàn)模擬銀行卡賬號(hào)輸入顯示效果
這篇文章主要介紹了js實(shí)現(xiàn)模擬銀行卡賬號(hào)輸入顯示效果,涉及JavaScript正則匹配與字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas畫(huà)圖，并實(shí)現(xiàn)分享功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
cropper js基于vue的圖片裁剪上傳功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了cropper js基于vue的圖片裁剪上傳功能的相關(guān)資料,需要的朋友可以參考下2018-03-03
取一個(gè)DOM元素的兄弟節(jié)點(diǎn),仿jQuery的siblings方法,用原生JS代碼完成2011-08-08