js实现盒子滚动动画效果


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了js实现盒子滚动动画效果的具体代码,供大家参考,具体内容如下

1、效果图1:

js实现盒子滚动动画效果

2、效果图2:

js实现盒子滚动动画效果

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、喜欢的朋友记得 点赞 转发 关注噢

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
js获取php变量的实现代码
Aug 10 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
js仿京东放大镜效果
Aug 09 #Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 #Javascript
js实现带有动画的返回顶部
Aug 09 #Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 #Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 #Javascript
vue 子组件watch监听不到prop的解决
Aug 09 #Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 #Javascript
You might like
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
用Python实现协同过滤的教程
2015/04/08 Python
详解Python Socket网络编程
2016/01/05 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
详解Python中的Lock和Rlock
2021/01/26 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
校本教研工作制度
2014/01/22 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
幼儿学前班评语
2014/12/29 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers