js實現盒子滾動動畫效果
本文實例為大家分享了js實現盒子滾動動畫效果的具體代碼，供大家參考，具體內容如下
1、效果圖1:
2、效果圖2：
3、源代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box1{ /* 必須加定位才可以動 */ position: absolute; left: 0; width: 50px; height: 50px; background-color: blueviolet; } </style></head><body> <div class='box1'></div> <script> // 動畫原理： // 1.獲得盒子當前位置 // 2.讓盒子在當前位置加上2px 的移動距離 // 3.利用定時器不斷重復中國操作 // 4.接觸定時器 // 5.注意添加定位，才可以使用element.style.left var box1 =document.querySelector(’.box1’) // 獲取事件源 var timer = setInterval(function(){ if( box1.offsetLeft >= 500){clearInterval(timer); // 清除定時器 }else{// 每50毫秒就將新的值給box1.leftbox1.style.left = box1.offsetLeft +2 +’px’; } },50) </script></body></html>
4、喜歡的朋友記得 點贊 轉發 關注噢
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. vue實現web在線聊天功能2. JavaScript實現頁面動態驗證碼的實現示例3. JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis4. Springboot 全局日期格式化處理的實現5. SpringBoot+TestNG單元測試的實現6. 完美解決vue 中多個echarts圖表自適應的問題7. 解決Android Studio 格式化 Format代碼快捷鍵問題8. 在Chrome DevTools中調試JavaScript的實現9. Python使用urlretrieve實現直接遠程下載圖片的示例代碼10. Java使用Tesseract-Ocr識別數字
網公網安備