JS运动特效之同时运动实现方法分析


Posted in Javascript onJanuary 24, 2018

本文实例讲述了JS运动特效之同时运动实现方法。分享给大家供大家参考,具体如下:

接着上一篇 《JS运动特效之链式运动》继续折腾

上一篇中我们的运动框架,可以完美的实现让一个物体先变宽,在变高,在变透明度.....,看似很完美了!

貌似可以喝喝茶看看美女了。但是老板突然说,让你同时改变一个物体的宽高和透明度,心碎了一地!!!

拿过之前的运动框架发现,无法实现让div同时又变宽,又变高,有变透明度!!最后无能为力,只好有请JSON大神出场了,不认识json的小伙伴们就找度娘问一下吧!

function startMove(obj,attr,iTarget,fn)

之前的startMove()函数里都是传入一个attr属性,在传入一个iTarget目标值,但是我们有个JSON这个神器之后,我们可以把属性和目标值,一对对放在JSON里,然后再startMove里只传入json来代替之前的attr和iTarget

比如我们想要改变宽,高,透明度,那么就把他们放入JSON : {width:300,height:300,opacity:30}

然后用for..in遍历这个json就可以得到相应的属性和值了,那么在运动框架程序中该怎么修改那??

先简单的测试说明一下json

<script>
  var json = {width:200,height:300,opacity:30};
  for(attr in json){
    alert("属性是:" + attr+ "--目标值"+json[attr]);
  }
</script>

JS运动特效之同时运动实现方法分析

有上面的弹出结果可以看出,json里的widht,height,opacity就是对应的属性名字,200,300,30对于的就是目标值,遍历这个json对象,可以看出attr就对应的是各个属性名,而json[attr]就对应各个目标值,看到这里应该就大概明白怎么修改了吧!

1. 首先function startMove(obj,attr,iTarget,fn)中attr,iTarget干掉,传入一个json对象

function startMove(obj,json,fn)

2.接着在定时器里遍历这个json看看都哪些属性需要变化

function startMove(obj,json,fn) {//fn:执行下一个运动的函数
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
       for(key in json){
        //... 用key代替之前传入的属性,json[atrr]代替之前的目标值
    // 也就是把之前startMove函数里的attr改写成key,iTarget改写成json[atrr]
    // 但是为了方便虽好把for in里的key的名字直接改写成attr就好了,for(attr in json)这样就不要一个个去改写startMove里的attr,省事
       }
      },30);
}

完整测试代码如下:

HTML部分:

<div id="div1"></div>

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,height:300,opacity:30});
      }
      oDiv.onmouseout = function () {
        startMove(oDiv,{width:200,height:200,opacity:100});
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,json,fn) {//json代替了原来的attr和iTarger参数
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
       for(attr in json){
         var objAttr = 0;
         if(attr == "opacity"){ // 由于for in里的key名字是attr所以这里不用替换
           objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
         }else{
           objAttr = parseInt(getStyle(obj,attr));
         }
         var iSpeed = (json[attr] -objAttr)/10;// 由之前的iTarget替换成了json[attr]
         iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
         if(objAttr == json[attr]){
           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>

JS运动特效之同时运动实现方法分析

到这里我们的运动框架几乎接近完美了,但是还有一个小问题,什么问题那?下回继续

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
video.js使用改变ui过程
Mar 05 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
全面分析JavaScript 继承
May 30 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
JS运动特效之链式运动分析
Jan 24 #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
You might like
用Simple Excel导出xls实现方法
2012/12/06 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
php实现小程序支付完整版
2018/10/09 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python3多线程知识点总结
2019/09/26 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
客服文员岗位职责
2013/11/29 职场文书
药品业务员岗位职责
2014/04/17 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
处罚决定书范文
2015/06/24 职场文书
基于python实现银行管理系统
2021/04/20 Python