JavaScript运动框架 链式运动到完美运动(五)


Posted in Javascript onMay 18, 2017

基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如很多网站中,一个方框的出现和退出:出现时先变宽再变高,退出时先变矮再变窄退出!
之前的模型是:

startMove(obj, json);

现在改为:

startMove(obj, json, fn);

也就是在第一次运动结束的时候执行fn(); fn是传过来的一个参数,这个参数是个函数,定时器清理之后手动运行fn();如果想采用链式运动,那就是在fn中再调用startMove(obj, json, fn),再在里面的fn中调用startMove(obj, json, fn),可以一直玩下去

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>运动框架(五):链式运动到完美运动</title>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      background: orange;
      margin: 10px;
      float: left;
    }
  </style>
</head>
<body>
  <div id="div1"></div>

  <script type="text/javascript">
    var oDiv = document.getElementById('div1');
    oDiv.onmouseover = function() {
      startMove(oDiv, {width:300,opacity:30}, function() {
        startMove(oDiv, {height:500});
      });
    };
    oDiv.onmouseout = function() {
      startMove(oDiv, {height:100}, function() {
        startMove(oDiv, {width:100,opacity:100});
      })
    };

    function getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      } else {
        return getComputedStyle(obj, null)[attr];
      }
    }

    function startMove(obj, json, fn) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
        var bStop = true;
        for (var attr in json) {
          var cur = 0;
          if (attr === 'opacity') {
            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
          } else {
            cur = parseInt(getStyle(obj, attr));
          }
          if (cur != json[attr]) {
            bStop = false;
          }
          var speed = (json[attr] - cur)/10;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          cur += speed;
          if (attr === 'opacity') {
            obj.style.filter = 'alpha(opacity:' + cur + ')';
            obj.style.opacity = cur/100;
          } else {
            obj.style[attr] = cur + 'px';
          }

        }
        if (bStop) {
          clearInterval(obj.timer);
          if (fn) fn();
        }

      }, 30);
    }
  </script>
</body>
</html>

最后提取出来的完美运动框架如下,motionFrame.js:

function getStyle(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, null)[attr];
  }
}

function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var bStop = true;
    for (var attr in json) {
      var cur = 0;
      if (attr === 'opacity') {
        cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
      } else {
        cur = parseInt(getStyle(obj, attr));
      }
      if (cur != json[attr]) {
        bStop = false;
      }
      var speed = (json[attr] - cur)/10;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      cur += speed;
      if (attr === 'opacity') {
        obj.style.filter = 'alpha(opacity:' + cur + ')';
        obj.style.opacity = cur/100;
      } else {
        obj.style[attr] = cur + 'px';
      }

    }
    if (bStop) {
      clearInterval(obj.timer);
      if (fn) fn();
    }

  }, 30);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
JavaScript运动框架 多值运动(四)
May 18 #Javascript
微信小程序页面开发注意事项整理
May 18 #Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 #Javascript
微信小程序网络请求wx.request详解及实例
May 18 #Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 #Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 #Javascript
AngularJS折叠菜单实现方法示例
May 18 #Javascript
You might like
?生?D片??C字串
2006/12/06 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python OpenCV获取视频的方法
2018/02/28 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python中update的基本使用方法详解
2019/07/17 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
机关财务管理制度
2014/01/17 职场文书
七年级政治教学反思
2014/02/03 职场文书
创先争优承诺书范文
2014/03/31 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
监守自盗观后感
2015/06/10 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers