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


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中判断对象类型的几种方法总结
Nov 11 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
js实现小球在页面规定的区域运动
Jun 16 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
初品cakephp 入门基础
2012/02/16 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python代码调试的几种方法总结
2015/04/15 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
pandas的相关系数与协方差实例
2019/12/27 Python
python判断正负数方式
2020/06/03 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
教师个人自我评价范文
2014/04/13 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
Python 阶乘详解
2021/10/05 Python
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技