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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
vue filters的使用详解
Jun 11 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
使用Python绘制图表大全总结
2017/02/11 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
汇科协同Java笔试题
2012/03/31 面试题
经理管理专业毕业自荐书范文
2014/02/12 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
高中生的自我评价
2014/03/04 职场文书
阳光体育活动总结
2014/04/30 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
财务稽核岗位职责
2015/04/13 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书