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 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
10分钟学会js处理json的常用方法
Dec 06 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设置进度条的方法
2015/07/08 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
js异或加解密效果代码
2008/06/25 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python中for循环控制语句用法实例
2015/06/02 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
法人委托书范本
2014/04/04 职场文书
多媒体教室标语
2014/06/26 职场文书
中秋晚会活动方案
2014/08/31 职场文书
2014年个人委托书范本
2014/10/13 职场文书
学习心理学心得体会
2016/01/22 职场文书