快捷導(dǎo)航

javascript的慣性運(yùn)動(dòng)實(shí)現(xiàn)代碼實(shí)例

更新時(shí)間：2019年09月07日 11:05:32 作者：muamaker

這篇文章主要介紹了javascript的慣性運(yùn)動(dòng)實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

移動(dòng)端的慣性運(yùn)動(dòng)，最早來(lái)自 ios 的專(zhuān)利。用于手指滑動(dòng)，離開(kāi)屏幕之后，屏幕內(nèi)容繼續(xù)滾動(dòng)。更有動(dòng)態(tài)感。

這里，以 pc 端，鼠標(biāo)橫向（沿x軸）拖拽的，慣性計(jì)算。移動(dòng)端同理

效果

代碼如下

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>慣性運(yùn)動(dòng)</title>
  <style type="text/css">
    #box{
      background: pink;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 100px;
      left: 100px;
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
<script type="text/javascript">
  var $box = document.getElementById("box");
   
  var isDown = false; //是否按下鼠標(biāo)
  var inertance = 1.2; //慣性系數(shù),越大,慣性越不明顯,不能小于0
  var fv = 0; //滑動(dòng)的力度
  var timer = null;
  $box.onmousedown = function(e){
    clearTimeout(timer);//清除定時(shí)器
    fv = 0;
    this._start = e.clientX; //鼠標(biāo)按下的位置
    isDown = true;//鼠標(biāo)是否有按下，主要防止用戶(hù)是從容器外開(kāi)始滑動(dòng)的
  }
   
  $box.onmousemove = function(e){
    if(isDown){
      var miss = e.clientX - this._start;
      moveMiss(miss)
      this._start = e.clientX;
      fv = miss;
    }
  }
   
  function moveMiss(miss){
    $box.style.left = miss + $box.offsetLeft + "px";
  }
   
  window.onmouseup = function(e){
    if(isDown){
      isDown = false;
      var me = this;
      var friction = ((fv >> 31) * 2 + 1) * inertance;//根據(jù)力度套用公式計(jì)算出慣性大小,公式要記住
      var num = Math.abs(friction);
      timer = setInterval(function(){
         fv -= friction;//力度按 慣性的大小遞減
         moveMiss(fv);
         if(Math.abs(fv) < num){ //如果力度減小到小于1了,結(jié)束,或者邊界彈回
           clearInterval(timer);
           return ;
         }
      },20);
    }
  }
   
</script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

layui?框架的upload上傳文件的data參數(shù)傳到后端的方法
這篇文章主要介紹了layui框架的upload上傳文件的data參數(shù)傳到后端的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
JavaScript優(yōu)化圖片懶加載的性能技巧
前端發(fā)展過(guò)程中有許多性能優(yōu)化的操作,比如防抖、節(jié)流和圖片懶加載等,在這里我們首先聊聊圖片懶加載操作,我們會(huì)經(jīng)常逛像淘寶和京東等購(gòu)物平臺(tái),一次性全部加載會(huì)導(dǎo)致加載時(shí)間長(zhǎng)、網(wǎng)絡(luò)資源消耗大,所以本文給大家介紹了JavaScript優(yōu)化圖片懶加載的性能技巧
2024-06-06
正則表達(dá)式優(yōu)化JSON字符串的技巧
這篇文章主要介紹了正則表達(dá)式優(yōu)化JSON字符串的技巧的相關(guān)資料,需要的朋友可以參考下
2015-12-12
純javascript實(shí)現(xiàn)分頁(yè)(兩種方法)
有的時(shí)候頁(yè)面需要很多不同的表組成的數(shù)據(jù)，該怎么分頁(yè)呢？使用數(shù)據(jù)庫(kù)分頁(yè)很簡(jiǎn)單，那么如何使用js實(shí)現(xiàn)分頁(yè)呢？接下來(lái)，小編幫大家解決這個(gè)問(wèn)題，需要的朋友一起來(lái)學(xué)習(xí)吧
2015-08-08
阻止子元素繼承父元素事件具體思路及實(shí)現(xiàn)
想要阻止點(diǎn)擊#p_cont區(qū)域時(shí)觸發(fā)a事件，需要在#p_cont區(qū)域內(nèi)加入阻止事件冒泡的代碼，具體實(shí)現(xiàn)祥看本文，希望對(duì)你有所幫助
2013-05-05
JS/jQuery實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)燈效果【案例】
這篇文章主要介紹了JS/jQuery實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)燈效果,結(jié)合具體實(shí)例形式分析了javascript/jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-02-02
微信小程序如何獲取用戶(hù)收貨地址
這篇文章主要為大家詳細(xì)介紹了微信小程序獲取用戶(hù)收貨地址的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
使用JavaScript實(shí)現(xiàn)獲取audio時(shí)長(zhǎng)
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)獲取audio時(shí)長(zhǎng),并且轉(zhuǎn)換為分鐘00:00:00格式,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
各種常用瀏覽器getBoundingClientRect的解析
getBoundingClientRect
2009-05-05
javascript 掃雷游戲
最近心血來(lái)潮，用JavaScript實(shí)現(xiàn)了Windows自帶的掃雷游戲。當(dāng)前只實(shí)現(xiàn)了基本功能，還有一個(gè)缺點(diǎn)就是只能在IE上正常運(yùn)行，估計(jì)是事件沒(méi)有處理好。
2009-05-05