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和javascript的区别(常用方法比较)
Jul 04 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 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
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
python快速查找算法应用实例
2014/09/26 Python
python文本数据相似度的度量
2018/03/12 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
指针和引用有什么区别
2013/01/13 面试题
校本教研工作方案
2014/01/14 职场文书
cf收人广告词大全
2014/03/14 职场文书
求职意向书范文
2014/04/01 职场文书
企业诚信承诺书
2014/05/23 职场文书
政治学求职信
2014/06/03 职场文书
经济贸易系求职信
2014/08/04 职场文书
物理课外活动总结
2014/08/27 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
人事专员岗位职责
2015/02/03 职场文书
辞职信格式模板
2015/02/27 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL