html惊喜盒子效果,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、喜欢的朋友记得 点赞 转发 关注噢

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。