基礎(chǔ)代碼

代碼實(shí)現(xiàn)的功能，點(diǎn)擊小方塊，可使其減速移動到指定位置，到達(dá)指定位置時(shí)，速度為0，代碼效果


html代碼

<div id="demo"></div> <button>run</button> <span></span>

css代碼

div {width: 100px;height: 100px;position: absolute;left: 0;top: 0;background-color: cadetblue; } button {position: absolute;top: 200px; } span {width: 1px;height: 100px;position: absolute;left: 300px;top: 0;background-color: black; }

js代碼

var oDiv = document.getElementById('demo'); var oBtn = document.getElementsByTagName('button')[0]; oBtn.onclick = function() {startMove(oDiv, 300); } function startMove(dom, target) {clearInterval(timer);var speed = null;var timer = setInterval (function () {speed = (target - oDiv.offsetLeft)/13;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if (dom.offsetLeft == target) {clearInterval(timer);} else {dom.style.left = dom.offsetLeft + speed +'px';console.log(dom.style.left);}},30) }

變量說明：target——指定位置的像素點(diǎn)
speed——小方塊一次移動的像素大小
timer——定時(shí)器的唯一標(biāo)識
問題1：怎樣使小方塊越靠近指定位置速度越低
解決：在靠近指定位置的過程中，二者距離減小，則可將速度與二者的距離聯(lián)系起來。因?yàn)樵诔跏歼^程中，二者距離過大，如果直接將這個(gè)值作為速度，則會使小方塊瞬間移動到指定位置，因此可將距離除以某個(gè)大于1的常數(shù)作為其移動速度。

問題2：當(dāng)小方塊非常接近指定位置時(shí)，其速度小于1時(shí)，不足以讓像素發(fā)生變化（像素只能是整數(shù)）
解決：此時(shí)采取向上取整或向下取整的方法，這樣可使小方塊移動到指定位置。

問題3：三目運(yùn)算符的作用
解決：因?yàn)樾》綁K可以在指定位置的左右兩邊，這兩種情況對速度的處理是不同的，當(dāng)小方塊的左邊線在指定位置的左邊時(shí)，其速度為正，此時(shí)為了解決問題2，需要使速度向上取整；當(dāng)小方塊的左邊線在指定位置的右邊時(shí)，其速度為負(fù)，此時(shí)為解決問題2，速度需要向下取整，使其絕對值增大

問題4：startMove函數(shù)中第一個(gè)定時(shí)器的作用
解決：為了防止多次觸發(fā)點(diǎn)擊事件造成多個(gè)定時(shí)器累加

【ps】寫博客的時(shí)候還遇到了之前沒有注意到的問題，之前雖然小方塊也停在了指定位置（速度為零了），但是因?yàn)榕卸l件錯(cuò)誤，導(dǎo)致定時(shí)器未被清除，錯(cuò)誤原因是將dom.style.left==target作為判定條件，dom.offsetLeft是數(shù)字，而dom.style.left是字符串，不能等于target，因此不會走清理定時(shí)器的語句。

利用緩沖運(yùn)動做懸浮窗

實(shí)現(xiàn)功能：鼠標(biāo)移入，懸浮窗移出，鼠標(biāo)移出，懸浮窗縮進(jìn)，代碼效果

html代碼

<div id="demo"><span></span> </div>

css代碼

div {width: 400px;height: 50px;position: absolute;top: 200px;left: -400px;background-color: cadetblue; } span {width: 50px;height: 50px;background-color: darkseagreen;position: absolute;top: 0;right: -50px; }

js代碼

var oDiv = document.getElementById('demo'); oDiv.onmouseenter = function () {startMove(this, 0); } oDiv.onmouseleave = function () {startMove(this, -400); } function startMove(dom, target) {clearInterval(dom.timer); //清理上個(gè)事件中走了else程序的定時(shí)器var speed = null;dom.timer = setInterval (function () {speed = (target - oDiv.offsetLeft)/13;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if (dom.offsetLeft == target) {clearInterval(dom.timer);} else {dom.style.left = dom.offsetLeft + speed +'px';console.log(dom.style.left);}},30) }

該例完全是對緩沖運(yùn)動的一個(gè)應(yīng)用，沒有新的注意點(diǎn)

透明度的緩沖

代碼效果

html代碼

<div id="demo"></div>

css代碼

div {width: 100px;height: 100px;background-color: cadetblue;opacity: 1;cursor: pointer; }

js代碼

var oDiv = document.getElementById('demo'); var timer; oDiv.onclick = function () {startMove(oDiv, 50); }//封裝getStyle函數(shù) function getStyle(dom, attr) {if (window.getComputedStyle) {return window.getComputedStyle(dom, null)[attr];} else {return dom.currentStyle[attr]} } function startMove(dom, target) {clearInterval(timer);var speed = null,iCur = null;timer = setInterval (function () {iCur = parseFloat(getStyle(dom, 'opacity')) * 100;speed = (target - iCur) / 13;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if (iCur == target) {clearInterval(timer);} else {dom.style.opacity = (iCur + speed) / 100;console.log(dom.style.opacity);}},30) }

問題：透明度是的值在[0,1]，且其變化是小數(shù)位，這樣取整的過程不合理
解決：將參數(shù)先擴(kuò)大100倍進(jìn)行運(yùn)算，在賦值給dom.style.opacity時(shí)再縮100倍

總結(jié)

以上是生活随笔為你收集整理的JavaScript的运动 —— 缓冲运动及其应用篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。