js实现盒子滚动动画效果
程序员文章站
2022-07-09 10:31:20
本文实例为大家分享了js实现盒子滚动动画效果的具体代码，供大家参考，具体内容如下1、效果图1:2、效果图2：3、源代码如下：
本文实例为大家分享了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.left
box1.style.left = box1.offsetleft +2 +'px';
}
},50)
</script>
</body>
</html>
4、喜欢的朋友记得 点赞 转发 关注噢
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。