javascript的慣性運(yùn)動(dòng)實(shí)現(xiàn)代碼實(shí)例
移動(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í)有所幫助,也希望大家多多支持腳本之家。
- JavaScript實(shí)現(xiàn)小球沿正弦曲線運(yùn)動(dòng)
- JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動(dòng)的動(dòng)畫(huà)效果封裝示例
- JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例
- JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法詳解
- JS小球拋物線軌跡運(yùn)動(dòng)的兩種實(shí)現(xiàn)方法詳解
- JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框
- JavaScript運(yùn)動(dòng)原理基礎(chǔ)知識(shí)詳解
相關(guān)文章
layui?框架的upload上傳文件的data參數(shù)傳到后端的方法
這篇文章主要介紹了layui框架的upload上傳文件的data參數(shù)傳到后端的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11純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-05JS/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使用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的解析
getBoundingClientRect2009-05-05