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添加table的行和列 具体实现方法
Jul 22 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
javascript常用经典算法详解
Jan 11 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
js实现拖拽功能
Mar 01 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
Python中input和raw_input的一点区别
2014/10/21 Python
python实现逻辑回归的方法示例
2017/05/02 Python
wxPython实现分隔窗口
2019/11/19 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
数控专业推荐信范文
2013/12/02 职场文书
运动会致辞稿50字
2014/02/04 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
2014组织生活会方案
2014/05/19 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
碧霞祠导游词
2015/02/09 职场文书
辞职信怎么写
2015/02/27 职场文书
2015年团支书工作总结
2015/04/03 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
闪闪的红星观后感
2015/06/08 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
电力安全学习心得体会
2016/01/18 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL