js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫效果的具體代碼，供大家參考，具體內(nèi)容如下
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{ /* 必須加定位才可以動(dòng) */ position: absolute; left: 0; width: 50px; height: 50px; background-color: blueviolet; } </style></head><body> <div class='box1'></div> <script> // 動(dòng)畫原理： // 1.獲得盒子當(dāng)前位置 // 2.讓盒子在當(dāng)前位置加上2px 的移動(dòng)距離 // 3.利用定時(shí)器不斷重復(fù)中國(guó)操作 // 4.接觸定時(shí)器 // 5.注意添加定位，才可以使用element.style.left var box1 =document.querySelector(’.box1’) // 獲取事件源 var timer = setInterval(function(){ if( box1.offsetLeft >= 500){clearInterval(timer); // 清除定時(shí)器 }else{// 每50毫秒就將新的值給box1.leftbox1.style.left = box1.offsetLeft +2 +’px’; } },50) </script></body></html>
4、喜歡的朋友記得 點(diǎn)贊 轉(zhuǎn)發(fā) 關(guān)注噢
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. IntelliJ IDEA導(dǎo)入jar包的方法2. Python requests庫(kù)參數(shù)提交的注意事項(xiàng)總結(jié)3. javascript實(shí)現(xiàn)雪花飄落效果4. JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼5. python操作mysql、excel、pdf的示例6. 使用Python和百度語(yǔ)音識(shí)別生成視頻字幕的實(shí)現(xiàn)7. 詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方法8. ASP基礎(chǔ)知識(shí)VBScript基本元素講解9. Gitlab CI-CD自動(dòng)化部署SpringBoot項(xiàng)目的方法步驟10. vue-electron中修改表格內(nèi)容并修改樣式
網(wǎng)公網(wǎng)安備