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 相关文章推荐
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
js电话号码验证方法
2015/09/28 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python2.7实现爬虫网页数据
2018/05/25 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python如何删除文件中重复的字段
2019/07/16 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Python中求对数方法总结
2020/03/10 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
经典大学生求职信范文
2014/01/06 职场文书
事业单位请假制度
2014/01/13 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
机械工程师岗位职责
2014/06/16 职场文书
青年标兵事迹材料
2014/08/16 职场文书
聘任通知书
2015/09/21 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android