通過js滾輪滾動時調用動畫_js實作盒子滾動動畫效果

本文執行個體為大家分享了js實作盒子滾動動畫效果的具體代碼，供大家參考，具體内容如下

1、效果圖1:

2、效果圖2：

3、源代碼如下：

Document

*{

margin: 0;

padding: 0;

}

.box1{

position: absolute;

left: 0;

width: 50px;

height: 50px;

background-color: blueviolet;

}

// 動畫原理：

// 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.left

box1.style.left = box1.offsetLeft +2 +'px';

}

},50)

4、喜歡的朋友記得 點贊 轉發 關注噢

以上就是本文的全部内容，希望對大家的學習有所幫助，也希望大家多多支援腳本之家。