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


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 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
js实现简单选项卡制作
Aug 05 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP 日常开发小技巧
2009/09/23 PHP
php Static关键字实用方法
2010/06/04 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php除数取整示例
2014/04/24 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
python的else子句使用指南
2016/02/27 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
django跳转页面传参的实现
2020/09/17 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
如何使用PHP session
2015/04/21 面试题
3个CCIE对一个工程师的面试题
2012/05/06 面试题
初婚未育证明
2014/01/15 职场文书
项目总经理岗位职责
2014/02/14 职场文书
安全保证书范文
2014/04/29 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
订货会邀请函
2015/01/31 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
用Python selenium实现淘宝抢单机器人
2021/06/18 Python