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 相关文章推荐
jquery中的过滤操作详细解析
Dec 02 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
JS随机密码生成算法
Sep 23 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
php use和include区别总结
2019/10/13 PHP
js实现星星打分效果的方法
2020/07/05 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
python根据日期返回星期几的方法
2015/07/06 Python
python制作一个桌面便签软件
2015/08/09 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
详解python如何引用包package
2020/06/07 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
python pillow库的基础使用教程
2021/01/13 Python
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
代办委托书怎么写
2014/08/01 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年入党决心书
2015/02/05 职场文书
花田少年史观后感
2015/06/16 职场文书
工作会议简报
2015/07/20 职场文书
Python基础详解之描述符
2021/04/28 Python
Golang全局变量加锁的问题解决
2021/05/08 Golang
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
ICOM R71E和R72E图文对比解说
2022/04/07 无线电