javascript彈性運動效果簡單實現(xiàn)方法
更新時間：2016年01月08日 14:10:27 作者：lostyu
這篇文章主要介紹了javascript彈性運動效果簡單實現(xiàn)方法,實例分析了JavaScript實現(xiàn)彈性運動的原理,涉及JavaScript數(shù)學運算與時間函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下
本文實例講述了javascript彈性運動效果簡單實現(xiàn)方法。分享給大家供大家參考，具體如下：
彈性運動實現(xiàn)原理：加速運動+減速運動+摩擦運動
運行效果截圖如下：
實例代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</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="運動" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
</body>
</html>
更多關(guān)于JavaScript運動效果相關(guān)內(nèi)容可查看本站專題：《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
相關(guān)文章
使用戶點擊后退按鈕使效三行代碼...2007-07-07
這篇文章主要介紹了JavaScript new對象的四個過程,結(jié)合實例形式簡單分析了javascript面向?qū)ο蟪绦蛟O計中new對象的四個過程相關(guān)原理與實現(xiàn)方法,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)側(cè)滑刪除功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JS+CSS實現(xiàn)簡易的滑動門效果代碼,涉及JavaScript動態(tài)遍歷及修改頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
基于JS定義回車事件的實現(xiàn)代碼，需要的朋友可以參考下2013-07-07
分頁這種組件，幾乎每一種框架都有這樣的組件，這篇文章主要介紹了MVVM框架下實現(xiàn)分頁功能示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了js實現(xiàn)模擬銀行卡賬號輸入顯示效果,涉及JavaScript正則匹配與字符串操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了微信小程序用canvas畫圖，并實現(xiàn)分享功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
cropper js基于vue的圖片裁剪上傳功能的實現(xiàn)代碼
這篇文章主要介紹了cropper js基于vue的圖片裁剪上傳功能的相關(guān)資料,需要的朋友可以參考下2018-03-03
取一個DOM元素的兄弟節(jié)點,仿jQuery的siblings方法,用原生JS代碼完成2011-08-08