js实现盒子滚动动画效果
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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.left
box1.style.left = box1.offsetLeft +2 +'px';
}
},50)
</script>
</body>
</html>
4、喜欢的朋友记得 点赞 转发 关注噢
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：js实现微信聊天效果
下一篇：js仿京东放大镜效果