基于匀速运动的实例讲解(侧边栏,淡入淡出)


Posted in Javascript onOctober 17, 2017

javascript中,如何让一个元素(比如div)运动起来呢?

设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 );

<style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 0px;
    }
</style>

基本的结构:

<input type="button" value="动起来"/>
   <div id="box"></div>

当我们点击,这个按钮的时候,要让div运动起来,其实就是让div的left值持续变化,那么div就会产生运动效果,我们先让left改变,再让他持续改变

window.onload = function(){
    var oBtn = document.querySelector( "input" ),
      oBox = document.querySelector( '#box' );
    oBtn.onclick = function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }
  }

那么每当我点击按钮的时候,div的left值就会在原来的基础上加上10px。这里也可以用获取非行间样式的方法获取left的值再加上10px,也可以达到效果

function css(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, false)[attr];
  }
}
window.onload = function () {
  var oBtn = document.querySelector("input"),
    oBox = document.querySelector('#box');
  oBtn.onclick = function () {
    oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
  }
}

offsetLeft与获取非行间样式left的值 有什么区别呢?

offsetLeft没有px单位,而left是有px单位的

oBtn.onclick = function () {
    // alert( css( oBox, 'left' ) ); //0px
    alert( oBox.offsetLeft ); //0
  }

现在div是点击一下动一下,我们让他持续动起来,怎么做? 加上定时器

oBtn.onclick = function () {
    setInterval( function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }, 1000 / 16 );
  }

当我们点击按钮时候,div就会不停的向左运动,怎么让他停下来呢?停下来,肯定是需要条件的,比如,我们让他跑到500px的时候停下来

var timer = null;
  oBtn.onclick = function () {
    timer = setInterval( function(){
      if ( oBox.offsetLeft == 500 ) {
        clearInterval( timer );
      }else {
        oBox.style.left = oBox.offsetLeft + 10 + 'px';
      }
    }, 1000 / 16 );
  }

这样,我们就可以让div停在500px的位置,这里如果我们把步长10 改成 7或者8,你会发现停不下来了,为什么呢?因为会跳过500px这个判断条件

0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 从497变成504跳过了500px,所以div停不下来,那怎么办呢?修改下判断条件就可以了.

oBtn.onclick = function () {
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

把条件变成>=500 清除定时器, 同时还要加上这句代码oBox.style.left = 500 + 'px',让他强制被停在500px, 否则div就不会停在500px, 而是504px了,还有一个问题,如果在div运动的过程中,你不停的点击按钮,会发现, div开始加速运动了,而不是每次加10px了,这又是为什么呢?这是因为,每次点击一下按钮,就开了一个定时器,每次点击一个按钮就开了一个定时器,这样就会有多个定时器叠加,那么速度也会产生叠加,所以div开始加速了,那么我们要让他保持10px的速度,意思就是不要让定时器叠加,更通俗点说就是确保一个定时器在开着。应该怎么做呢?

oBtn.onclick = function () {
  clearInterval( timer );
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

只需要在每次点击按钮的时候,清除之前的定时器就可以了,这样就能确保始终一个定时器开着,至此,一个最基本的匀速运动结构就完成了,那么我们可以把他封装成函数

function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }

有了这个函数之后,我们来小小的应用一下。

http://www.jiathis.com/getcode

打开这个网站,你注意看他右边有个侧栏式效果(分享到),这种特效在网站上很普遍

基于匀速运动的实例讲解(侧边栏,淡入淡出)

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>侧边栏 - by ghostwu</title>
  <style>
    #box {
      width: 150px;
      height: 300px;
      background: red;
      position: absolute;
      left: -150px;
      top: 50px;
    }

    #box div {
      width: 28px;
      height: 100px;
      position: absolute;
      right: -28px;
      top: 100px;
      background: green;
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oBox = document.getElementById("box");
      oBox.onmouseover = function () {
        animate(this, 0, 10);
      }
      oBox.onmouseout = function () {
        animate(this, -150, -10);
      }
      function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }
    }
  </script>
</head>
<body>
<div id="box">
  <div>分享到</div>
</div>
</body>
</html>

再来一个淡入淡出的效果:

基于匀速运动的实例讲解(侧边栏,淡入淡出)

当鼠标移上去之后,透明度变成1

基于匀速运动的实例讲解(侧边栏,淡入淡出)

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>淡入淡出 - by ghostwu</title>
  <style>
    img {
      border: none;
      opacity: 0.3;
      filter: alpha(opacity:30);
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oImg = document.getElementById("img");
      oImg.onmouseover = function(){
        animate( this, 100, 10 );
      }
      oImg.onmouseout = function(){
        animate( this, 30, -10 );
      }
      //alpha=30 --> 100
      function animate(obj, target, speed) {
        clearInterval(timer);
        var cur = 0;
        timer = setInterval(function () {
          cur = css( obj, 'opacity') * 100;
          if( cur == target ){
            clearInterval( timer );
          }else {
            cur += speed;
            obj.style.opacity = cur / 100;
            obj.style.filter = "alpha(opacity:" + cur + ")";
          }
        }, 30);
      }

      function css(obj, attr) {
        if (obj.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return getComputedStyle(obj, false)[attr];
        }
      }
    }
  </script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

以上这篇基于匀速运动的实例讲解(侧边栏,淡入淡出)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
javascript 中模板方法单例的实现方法
Oct 17 #Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 #Javascript
react中的ajax封装实例详解
Oct 17 #Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 #Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 #Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 #Javascript
Vue中封装input组件的实例详解
Oct 17 #Javascript
You might like
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
又一个小巧的图片预加载类
2007/05/05 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
webpack打包非模块化js的方法
2018/10/24 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
wxPython的安装与使用教程
2018/08/31 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
业务经理的岗位职责
2013/11/16 职场文书
小学教师事迹材料
2014/01/13 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
营业用房租赁协议书
2014/11/26 职场文书
干部考察材料范文
2014/12/24 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技