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注意img图片的onerror事件的分析
Jan 01 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
jQuery实现元素的插入
Feb 27 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 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
MySQL修改密码方法总结
2008/03/25 PHP
php 缓存函数代码
2008/08/27 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python生成带有表格的图片实例
2019/02/03 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
私有程序集与共享程序集有什么区别
2013/04/05 面试题
优秀管理者获奖感言
2014/02/17 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
采购员工作总结范文
2015/08/12 职场文书
大学副班长竞选稿
2015/11/21 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python