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 相关文章推荐
js验证表单大全
Nov 25 Javascript
JavaScript中的事件处理
Jan 16 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
javaScript基础语法介绍
Feb 28 Javascript
js比较日期大小的方法
May 12 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 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
一个ftp类(ini.php)
2006/10/09 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
浅谈javascript的调试
2015/01/28 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
TypeScript入门-接口
2017/03/30 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
关于vue中 $emit的用法详解
2018/04/12 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Python多线程thread及模块使用实例
2020/04/28 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
工程师岗位职责
2013/11/08 职场文书
八年级物理教学反思
2014/01/19 职场文书
旅游网创业计划书
2014/01/31 职场文书
安全责任书怎么写
2014/07/28 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
离婚被告答辩状
2015/05/22 职场文书
军训新闻稿范文
2015/07/17 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers