JS實現(xiàn)的緩沖運動效果示例
更新時間：2018年04月30日 14:12:26 作者：珍惜每分每秒
這篇文章主要介紹了JS實現(xiàn)的緩沖運動效果,涉及JavaScript數(shù)值運算與時間函數(shù)相關使用技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)的緩沖運動效果。分享給大家供大家參考，具體如下：
緩沖需要用到數(shù)值取整，向上取整:Math.ceil() 向下取整Math.floor()
移動的速度慢慢減慢的效果，移動速度=(終點位置 - 當前位置) / 一個數(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.dhdzp.com JS緩沖運動</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， 向上取整， 否則向右，向下取整，速度=(終點位置 - 當前位置)/一個數(shù)
e==500 ? speed = Math.ceil((e-(div.offsetLeft))/30):speed = Math.floor((e-(div.offsetLeft))/30)
if (e <= div.style.left){//達到，關閉定時器
clearInterval(time);
}
else
{
div.style.left = div.offsetLeft+speed+'px';
}
},30);
};
</script>
<body>
<input type="button" value="向右運動" id="btn" />
<input type="button" value="向左運動" id="btn2" />
<div id = "div">
</div>
<div id = "div2">
</div>
</body>
</html>
點擊此處查看在線演示效果。
或者使用本站在線HTML/js運行工具測試查看運行效果：http://tools.jb51.net/code/HtmlJsRun
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
本文主要介紹了JavaScript?對象的四種方式比較詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
ES6中引入了迭代器與可迭代對象的概念，并且提供了對可迭代對象的相關支持，如for...of循環(huán)，Map(iterable)構造器，展開語法...等。讓我們對數(shù)組外的數(shù)據集合的遍歷操作也得到極大簡化2022-06-06
本文主要介紹了用move.js庫實現(xiàn)百葉窗特效的思路與方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
看網上好多朋友問js判斷是否有文件的代碼，而網上的好多都是是不是全是中文和一些正則，并沒有實際解決問題，在腳本之家站長的幫助下，發(fā)現(xiàn)了這個思路。2008-09-09
這篇文章主要介紹了JavaScript中跨域調用Flash的方法,只需要在Flash中加一句話即可,需要的朋友可以參考下2014-08-08
本文主要介紹了uniapp實現(xiàn)附近商家定位的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了JS兼容所有瀏覽器的DOMContentLoaded事件的相關資料，標準瀏覽器中，使用DOMContentLoaded事件即可實現(xiàn)我們的要求，注冊事件處理函數(shù)也極為簡單，感興趣的朋友一起學習吧2018-01-01
這篇文章主要介紹了js實現(xiàn)單層數(shù)組轉多層樹方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
日常開始中常用到的一些原生JavaScript函數(shù),比較實用, 今天特地整理一下,分享給大家,希望對大家有用,會常更新,同時也歡迎大家補充.2010-09-09
細數(shù)promise與async/await的使用及區(qū)別說明
這篇文章主要介紹了細數(shù)promise與async/await的使用及區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07