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 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
Jquery ajax基础教程
Nov 20 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
js逆向解密之网络爬虫
May 30 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 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
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
详解python中的数据类型和控制流
2019/08/08 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
环保专业大学生职业规划设计
2014/01/10 职场文书
商务助理求职信范文
2014/04/20 职场文书
2014年技术员工作总结
2014/11/18 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
催款函怎么写
2015/06/24 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
python 学习GCN图卷积神经网络
2022/05/11 Python