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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
如何写好建议书
2014/03/13 职场文书
母亲节主题班会
2015/08/14 职场文书