JS运动特效之链式运动分析


Posted in Javascript onJanuary 24, 2018

本文实例讲述了JS运动特效之链式运动。分享给大家供大家参考,具体如下:

接着前面一篇《JS运动特效之任意值添加运动的方法》继续折腾

链式运动:一个运动接着一个运动。比如:鼠标移入div先让宽变大,接着在让高变大,接着在让透明度变化等等一系列运动连着做。废话不多说,上栗子!!

JS运动特效之链式运动分析

当鼠标移入div的时候,div先变宽,在变高,然后改变透明度;移出又逐次恢复到原样;

实现链式运动,需要对上一篇中的startMove() 函数继续做改进

function startMove(obj,attr,iTarget,fn) 多传入一个fn参数,表示当一个运动结束之后,继续进行下一个运动,当然还需要判断一下,如果有下一个运动,就执行下一个运动,如果没有就继续向下执行

if(fn){
  fn();
}

完整测试代码:

HTML部分:

<body>
<div id="div1"></div>
</body>

css部分:

<style>
  #div1{
   width: 200px;height: 200px;
   background: green;
  }
</style>

js部分:

<script>
  window.onload = function(){
   var oDiv = document.getElementById('div1');
   oDiv.onmouseover = function () {
    startMove(oDiv,'width',300,function () {
     startMove(oDiv,'height',300, function () {
      startMove(oDiv,'opacity',30);
     });
    });
   }
   oDiv.onmouseout = function () {
    startMove(oDiv,'opacity',100, function () {
     startMove(oDiv,'height',200, function () {
      startMove(oDiv,'width',200);
     });
    });
   }
  }
  function getStyle(obj,attr){
   return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
  }
  function startMove(obj,attr,iTarget,fn) {//fn:执行下一个运动的函数
   clearInterval(obj.timer);
   obj.timer = setInterval(function () {
    var objAttr = 0;
    if(attr == "opacity"){
     objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
    }else{
     objAttr = parseInt(getStyle(obj,attr));
    }
    var iSpeed = (iTarget -objAttr)/10;
    iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
    if(objAttr == iTarget){
     clearInterval(obj.timer);
     if(fn){// 如果传了 “下一个运动的函数” 就执行
      fn();
     }
    }else{
     if(attr == "opacity"){
      obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
      obj.style.opacity = (objAttr+iSpeed)/100;
     }else{
      obj.style[attr] = objAttr+iSpeed+'px';
     }
    }
   },30);
  }
</script>

未完待续....

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
myeclipse安装jQuery插件的方法
Mar 29 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
vue+iview实现文件上传
Nov 17 Vue.js
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 #Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 #Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 #Javascript
详解node child_process模块学习笔记
Jan 24 #Javascript
浅谈Node.js 子进程与应用场景
Jan 24 #Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 #Javascript
深入理解node.js http模块
Jan 24 #Javascript
You might like
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
GWT的应用有哪两种部署模式
2012/12/21 面试题
北大自主招生自荐信
2013/10/19 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
精彩自我鉴定
2014/01/16 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP