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 相关文章推荐
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python @classmethod 的使用场合详解
2019/08/23 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
英国计算机商店:Technextday
2019/12/28 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
毕业生自我鉴定实例
2014/01/21 职场文书
给国外客户的邀请函
2014/01/30 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
清洁工工作总结
2015/08/11 职场文书