js实现盒子滚动动画效果
更新时间：2020年08月09日 11:36:48 作者：foreverどL
这篇文章主要为大家详细介绍了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、喜欢的朋友记得 点赞 转发 关注噢
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
奇妙的js...2007-09-09
这篇文章主要介绍了JavaScript实现ASC转汉字及汉字转ASC的方法,涉及JavaScript编码转换的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了详解ES7 Decorator 入门解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这段代码在服务器中没有权限，可以保存在本地，存为htm文件，运行即可，就可以把文本内容存为excel文件了2008-01-01
setInterval 和 setTimeout会产生内存溢出
jscript 5.7 发布修复了不少ie javascript内存泄露的问题。但是leak依然存在。当我们频繁使用 setInterval 和 setTimeout 时就会每几秒钟出现32k leak...2008-02-02
这篇文章主要介绍了详解Webpack + ES6 最新环境搭建与配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家介绍了Webpack中Source Map配置深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
字符串的操作是任何一门计算机语言都必须面对的问题,下面这篇文章主要给大家介绍了关于利用JS+ES6新增字符串操作方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这是来自http://www.quirksmode.org/js/this.html这篇文章里对this的定义，直接看定义似乎什么也不知道，下面通过实例来说明各种情况下this所指代的对象以及原理。2008-10-10
这篇文章主要介绍了JavaScript简单获取系统当前时间的方法,涉及javascript针对日期与时间的判断以及字符串组合的相关技巧,需要的朋友可以参考下2016-08-08
最新评论