编程 Javascript

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

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>

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

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

- Author -

ghostwu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js实现一个省市区三级联动选择框代码分享

Mar 06 Javascript

cookie 最近浏览记录(中文escape转码)具体实现

Jun 08 Javascript

a标签的href和onclick 的事件的区别介绍

Jul 26 Javascript

javascript初学者常用技巧

Sep 02 Javascript

JS实现OCX控件的事件响应示例

Sep 17 Javascript

javascript三元运算符用法实例

Apr 16 Javascript

js实现点击链接后延迟3秒再跳转的方法

Jun 05 Javascript

JS通过Cookie判断页面是否为首次打开

Feb 05 Javascript

JS事件添加和移出的兼容写法示例

Jun 20 Javascript

ES6通过babel转码使用webpack使用import关键字

Dec 13 Javascript

Webpack优化配置缩小文件搜索范围

Dec 25 Javascript

微信小程序录音实现功能并上传(使用node解析接收)

Feb 26 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