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 相关文章推荐
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php 邮件发送问题解决
2014/03/22 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
js中日期的加减法
2015/05/06 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
浅谈python中set使用
2016/06/30 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
副总经理工作职责
2013/11/28 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
大学生英语演讲稿
2014/04/24 职场文书
运动员口号
2014/06/09 职场文书
营销与策划实训报告
2014/11/05 职场文书
部队2014年终工作总结
2014/11/27 职场文书
小班下学期个人总结
2015/02/12 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL