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触摸事件、手势事件详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了基于JS实现禁止查看源码及获取键盘的按键值,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
Add a Picture to a Microsoft Word Document
Add a Picture to a Microsoft Word Document...2007-06-06
这篇文章主要介绍了moment.js轻松实现获取当前日期是当年的第几周,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JavaScript判断数组类型的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了JS中的事件委托,结合实例形式简单分析了javascript事件委托的概念、功能、使用方法及相关注意事项,需要的朋友可以参考下2018-03-03
layui 中select下拉change事件失效的解决方法
今天小编就为大家分享一篇layui 中select下拉change事件失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
Node.js：Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件
什么是Node.js?还服务器端javascript?对于这个概念我在这篇文章不做解释，可以自己去搜索了解下，服务器端js不是新技术，只是最近的node.js的火爆让他爆发了，我会在以后的文章里解释什么是node.js。2011-06-06
这篇文章主要给大家介绍了关于js前端面试之同步与异步问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
JS动态获取当前时间,并写到特定的区域，需要的朋友可以参考一下2013-05-05
最新评论