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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
JS delegate与live浅析
Dec 21 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
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
PHP禁止页面缓存的代码
2011/10/23 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
srcElement表格样式
2006/09/03 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
Javascript事件实例详解
2013/11/06 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python实现梯度下降算法
2020/03/24 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
意向书范文
2014/03/31 职场文书
教师评语大全
2014/04/28 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
休假证明书
2015/06/24 职场文书
小学课改工作总结
2015/08/13 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
Nginx跨域问题解析与解决
2022/08/05 Servers