緩沖運動 · JavaScript學習記錄

### 緩沖運動 - 逐漸變慢，最后停止 - 距離越大速度越大，**速度取整** - 速度由距離決定 - 速度 = (目標值-當前值)/縮放系數 - `Math.ceil`：向上取整 - `Math.floor`：向下取整 - 例子：緩沖菜單 - Bug：速度取整 `Math.ceil`、`Math.floor` - 跟隨頁面滾動的緩沖側邊欄 - 潛在問題：目標不是整數時 - 目標取整：`parseInt()` - ` scrollTop = document.documentElement.scrollTop || document.body.scrollTop;` - `document.documentElement.scrollTop`：IE、Firefox - `document.body.scrollTop`：chrome - `Math.random()` - 返回一個等于0小于1的一個隨機浮點數 - 說明：求 n到 m之間的**隨機整數的公式** - `random = Math.floor(Math.random()*(m-n+1)+n)` - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" href="../reset.css"> <title>緩沖運動及停止條件</title> <style> body { width: 800px; height: 2000px; } #div1 { width: 150px; height: 400px; background-color:cyan; position: absolute; left: -150px; } #div1 span { width: 20px; height: 60px; left: 150px; background-color:rgb(106, 176, 255); position: absolute; margin-top: 170px; } #div2 { top: 50px; left: 150px; position: absolute; filter:alpha(opacity=30); opacity: 0.3; width: 140px; height: 140px; background-color: red; } #div3 { width: 100px; height: 200px; background: rgb(99, 128, 255); position: absolute; right: 0px; bottom: 0px; } #div4 { width: 298px; height: 198px; border: rgb(0, 0, 0) solid 1px; position: absolute; left: 100px; } </style> <script> window.onload = function () { // 封裝getElementById function get(id) { return document.getElementById(id); }; var oDiv = get('div1'); var timer = ''; // 注冊鼠標移入事件 oDiv.onmouseover = function () { startMove(0, oDiv); }; oDiv.onmouseout = function () { startMove(-150, oDiv); }; // 圖片淡入淡出 var oDiv2 = get('div2'); var alpha = 30; oDiv2.onmouseover = function () { shallow(100); } oDiv2.onmouseout = function () { shallow(30); } // 變淺函數 function shallow(target) { clearInterval(timer); timer = setInterval(shallowMove, 30); function shallowMove() { speed = (target - alpha)/7; if (alpha === target) { clearInterval(timer); } else if (alpha < target) { alpha += speed; oDiv2.style.filter = 'alpha(opacity='+ Math.ceil(alpha) +')'; oDiv2.style.opacity = Math.ceil(alpha)/100; } else if (alpha > target) { alpha += speed; oDiv2.style.filter = 'alpha(opacity='+ Math.floor(alpha) +')'; oDiv2.style.opacity = Math.floor(alpha)/100; } } } // 跟隨頁面滾動的緩沖側邊欄 var oDiv3 = get('div3'); window.onscroll = function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var target = parseInt((document.documentElement.clientHeight - oDiv3.offsetHeight)/2 + scrollTop); scrollMove(target); console.log( '可視區：', document.documentElement.clientHeight, '滾動距離：', scrollTop, 'div3的高度：', oDiv3.offsetHeight, '目標值：', target) } // 縱向運動函數 function scrollMove(target) { clearInterval(timer); timer = setInterval(scrollMoving, 30); function scrollMoving() { var speed = (target - oDiv3.offsetTop)/7; if (oDiv3.offsetTop === target) { clearInterval(timer); } else if (oDiv3.offsetTop > target) { oDiv3.style.top = oDiv3.offsetTop + Math.floor(speed) + 'px'; } else if (oDiv3.offsetTop < target) { oDiv3.style.top = oDiv3.offsetTop + Math.ceil(speed) + 'px'; } } } // 運動停止的條件 var btn1 = get('btn1'); var btn2 = get('btn2'); var btn3 = get('btn3'); var btn4 = get('btn4'); btn1.onclick = function () { startMove(100, oDiv2); } btn2.onclick = function () { startMove(400, oDiv2); } btn3.onclick = function () { startMove2(100, oDiv2); } btn4.onclick = function () { startMove2(400, oDiv2); } // 橫向緩沖運動框架 function startMove(target, div) { clearInterval(timer); timer = setInterval(move, 30); function move() { speed = (target - div.offsetLeft)/9; if (div.offsetLeft < target) { div.style.left = div.offsetLeft + Math.ceil(speed) + 'px'; } else if (div.offsetLeft > target) { div.style.left = div.offsetLeft + Math.floor(speed) + 'px'; } else if (div.offsetLeft === target){ clearInterval(timer); } } } // 橫向勻速運動框架 function startMove2(target, div) { clearInterval(timer); timer = setInterval(move2, 30); function move2() { // speed正向 if (div.offsetLeft <= target) { speed = 9; moving(); } // speed反向 else if (div.offsetLeft >= target) { speed = -9; moving(); } function moving() { if (Math.abs(target - div.offsetLeft) <= Math.abs(speed)) { div.style.left = target + 'px'; // 直接到達 clearInterval(timer); // 停止 } else { div.style.left = div.offsetLeft + speed + 'px'; } } } } } </script> </head> <body> <div id="div1"> <span>分享到</span> </div> <div id="div2"><img src="images/0.png" alt=""></div> <div id="div3"></div> <div id="div4"> <input type="button" name="" id="btn1" value="減速到100px"> <input type="button" name="" id="btn2" value="減速到400px"> <input type="button" name="" id="btn3" value="勻速到100px"> <input type="button" name="" id="btn4" value="勻速到400px"> </div> </div> </body> </html> ```