無縫滾動 · JavaScript學習記錄

### 無縫滾動 - 效果演示 - 物體運動基礎 - 讓 `div` 移動起來 - `offsetLeft/offsetTop` 的作用：獲取當前對象的左邊距/上邊距 - `offsetWidth/offsetHeight` - 用定時器讓物體連續移動： - `innerHTML` 拼接兩節圖片, 寬度后面加 `px` 才會生效 - `overflow:hidden;` 隱藏元素外的內容 - 改變滾動的方向 - 修改 `speed` - 修改判定條件 - 多次點擊越來越快：`if (!timer) `或`clearInterval(timer);` 避免重復調用 - 鼠標移入暫停 - 移入關閉定時器 - 移出重新開啟定時器 - 代碼： ```HTML <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" href="../reset.css"> <title>移出延時隱藏</title> <style> body { width: 560px; margin: 0 auto; } #d2 { margin: 10px; width: 200px; height: 200px; background-color: rgb(0, 204, 255); display: none; float: left; } #d1 { margin: 10px; width: 100px; height: 100px; background-color: rgb(0, 255, 149); float: left; } #d3 { margin: 220px auto; width: 560px; height: 140px; position: absolute; background-color: rgb(135, 182, 182); overflow: hidden; } #u1 { position: relative; } #u1 li { float: left; } </style> <script> window.onload = function () { // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // 封裝 getElementsByTagName function gets(tagName) { return document.getElementsByTagName(tagName) } // 鼠標移動到 d1 上，d2 顯示，移出隱藏； // 鼠標移到 d2 上，清除定時器，移出 d2 開啟定時器 let timer = ''; get('d1').onmouseover= get('d2').onmouseover = function () { clearTimeout(timer); get('d2').style.display = 'block'; } get('d1').onmouseout= get('d2').onmouseout = function () { timer = setTimeout(hide,1000); } function hide() { get('d2').style.display = 'none'; } // 無縫滾動 get('u1').innerHTML += get('u1').innerHTML; get('u1').style.width = gets('li').length * gets('li')[0].offsetWidth + 'px'; let timer2 = ''; let speed = 2; // 左移 get('btn1').onclick = function () { speed = -2; if (!timer2) { timer2 = setInterval(move, 30); } } // 右移 get('btn2').onclick = function () { speed = 2; if (!timer2) { timer2 = setInterval(move, 30); } } // 移動 function move() { get('u1').style.left = get('u1').offsetLeft + speed + 'px'; if (get('u1').offsetLeft < -get('u1').offsetWidth/2) { get('u1').style.left = 0; } else if (get('u1').offsetLeft > 0){ get('u1').style.left = -get('u1').offsetWidth/2 + 'px'; } console.log(get('u1').offsetLeft); } // 鼠標懸停 get('d3').onmouseover = function () { clearInterval(timer2); } get('d3').onmouseout = function () { timer2 = setInterval(move, 30); } } </script> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"> <ul id="u1"> <li><img src="images/1.png" alt=""></li> <li><img src="images/2.png" alt=""></li> <li><img src="images/3.png" alt=""></li> <li><img src="images/4.png" alt=""></li> </ul> </div> <input type="button" name="" id="btn1" value="左移"> <input type="button" name="" id="btn2" value="右移"> </body> </html> ```