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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
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 mkdir()定义和用法
2009/01/14 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
Javascript浅谈之引用类型
2013/12/18 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
vue高德地图之玩转周边
2017/06/16 Javascript
深入理解React高阶组件
2017/09/28 Javascript
webpack多页面开发实践
2017/12/18 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python opencv之SIFT算法示例
2018/02/24 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
上海中网科技笔试题
2012/02/19 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
物流专业求职计划书
2014/01/10 职场文书
设备收款委托书范本
2014/10/02 职场文书
胡桃夹子观后感
2015/06/11 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
Python实现聚类K-means算法详解
2022/07/15 Python