快捷導(dǎo)航

JS實(shí)現(xiàn)的緩沖運(yùn)動(dòng)效果示例

更新時(shí)間：2018年04月30日 14:12:26 作者：珍惜每分每秒

這篇文章主要介紹了JS實(shí)現(xiàn)的緩沖運(yùn)動(dòng)效果,涉及JavaScript數(shù)值運(yùn)算與時(shí)間函數(shù)相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的緩沖運(yùn)動(dòng)效果。分享給大家供大家參考，具體如下：

緩沖需要用到數(shù)值取整，向上取整:Math.ceil() 向下取整Math.floor()

移動(dòng)的速度慢慢減慢的效果，移動(dòng)速度=(終點(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.fzitv.net JS緩沖運(yùn)動(dòng)</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)動(dòng)" id="btn" />
<input type="button" value="向左運(yùn)動(dòng)" id="btn2" />
<div id = "div">
</div>
<div id = "div2">
</div>
</body>
</html>

點(diǎn)擊此處查看在線演示效果。

或者使用本站在線HTML/js運(yùn)行工具測(cè)試查看運(yùn)行效果：http://tools.jb51.net/code/HtmlJsRun

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript?對(duì)象的四種方式比較詳解
本文主要介紹了JavaScript?對(duì)象的四種方式比較詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
JavaScript可迭代對(duì)象詳細(xì)介紹
ES6中引入了迭代器與可迭代對(duì)象的概念，并且提供了對(duì)可迭代對(duì)象的相關(guān)支持，如for...of循環(huán)，Map(iterable)構(gòu)造器，展開(kāi)語(yǔ)法...等。讓我們對(duì)數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡(jiǎn)化
2022-06-06
用move.js庫(kù)實(shí)現(xiàn)百葉窗特效
本文主要介紹了用move.js庫(kù)實(shí)現(xiàn)百葉窗特效的思路與方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
js判斷是否有中文的腳本_js判斷中文方法集合
看網(wǎng)上好多朋友問(wèn)js判斷是否有文件的代碼，而網(wǎng)上的好多都是是不是全是中文和一些正則，并沒(méi)有實(shí)際解決問(wèn)題，在腳本之家站長(zhǎng)的幫助下，發(fā)現(xiàn)了這個(gè)思路。
2008-09-09
JavaScript中跨域調(diào)用Flash的方法
這篇文章主要介紹了JavaScript中跨域調(diào)用Flash的方法,只需要在Flash中加一句話(huà)即可,需要的朋友可以參考下
2014-08-08
uniapp實(shí)現(xiàn)附近商家定位的示例代碼
本文主要介紹了uniapp實(shí)現(xiàn)附近商家定位的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
JS兼容所有瀏覽器的DOMContentLoaded事件
這篇文章主要介紹了JS兼容所有瀏覽器的DOMContentLoaded事件的相關(guān)資料，標(biāo)準(zhǔn)瀏覽器中，使用DOMContentLoaded事件即可實(shí)現(xiàn)我們的要求，注冊(cè)事件處理函數(shù)也極為簡(jiǎn)單，感興趣的朋友一起學(xué)習(xí)吧
2018-01-01
js實(shí)現(xiàn)單層數(shù)組轉(zhuǎn)多層樹(shù)
這篇文章主要介紹了js實(shí)現(xiàn)單層數(shù)組轉(zhuǎn)多層樹(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
一些常用且實(shí)用的原生JavaScript函數(shù)
日常開(kāi)始中常用到的一些原生JavaScript函數(shù),比較實(shí)用, 今天特地整理一下,分享給大家,希望對(duì)大家有用,會(huì)常更新,同時(shí)也歡迎大家補(bǔ)充.
2010-09-09
細(xì)數(shù)promise與async/await的使用及區(qū)別說(shuō)明
這篇文章主要介紹了細(xì)數(shù)promise與async/await的使用及區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07