具体代码如下:

  

  1. function move(obj,json,sv,fnEnd){
  2. //CSS样式值
  3. function getStyle(obj,attr){
  4. if(obj.currentStyle) {return obj.currentStyle[attr];}
  5. else {return getComputedStyle(obj,false)[attr];}
  6. }
  7. //运动
  8. clearInterval(obj.timer);
  9. obj.timer=setInterval(function(){
  10. var isAllCompleted=true; //假设全部运动都完成了
  11. for(attr in json){
  12. var attrValue=0;
  13. switch(attr){
  14. case 'opacity':
  15. attrValue=Math.round(parseFloat(getStyle(obj,attr))*100);break;
  16. default:
  17. attrValue=parseInt(getStyle(obj,attr));
  18. }
  19. //默认速度4
  20. var speed=(json[attr]-attrValue)/(sv||4);
  21. speed=speed>0?Math.ceil(speed):Math.floor(speed);
  22. //如果循环过程中存在尚未结束的运动,isAllCompleted为假
  23. if(attrValue!=json[attr]) isAllCompleted=false;
  24. switch(attr){
  25. case 'opacity': {
  26. obj.style.filter="alpha(opacity="+(attrValue+speed)+")";
  27. obj.style.opacity=(attrValue+speed)/100;
  28. }; break;
  29. default:obj.style[attr]=attrValue+speed+'px';
  30. }
  31. }//for in end!
  32. //所有循环结束后,只有当全部运动结束后(isAllCompleted=true)时才关闭定时器
  33. if(isAllCompleted){
  34. clearInterval(obj.timer);
  35. if(fnEnd) fnEnd();
  36. }
  37. },30);
  38. }

  运动框架 : move(obj,propertiesJson,speed,fnCallBack)
    obj: 运动物体
    propertiesJson: 运动属性和运动目标值的json集合,{'opacity':100}
    speed: 运动的速度,speed-value,值越小速度越大
    fnCallBack: 运动结束后的回调函数

  此框架可以实现多个参数,多个物体运动互不影响。

js 运动框架-轻量级的更多相关文章

  1. 带无缝滚动的轮播图(含JS运动框架)

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  3. js 运动框架及实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  5. js运动框架之掉落的扑克牌(重心、弹起效果)

    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...

  6. js运动框架完成块的宽高透明度及颜色的渐变

    了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...

  7. js运动框架 step by step

    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...

  8. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  9. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...

随机推荐

  1. 孔浩老师的 Struts2 教程听课笔记(思维导图)

    最近有空重头学习了一遍孔浩老师的 Struts2 教程,重新写了一份听课笔记.后面常用 form 标签.服务器端验证.异常处理因为时间问题,没有来得及整理.后续我会抽空补上.最近忙着准备笔试.面试. ...

  2. loj#2391 「JOISC 2017 Day 1」港口设施

    分析 https://yhx-12243.github.io/OI-transit/records/uoj356%3Bloj2391%3Bac2534.html 代码 #include<bits ...

  3. JS-DOM Event

    DOM Level 0 Events:绑定到 DOM 的属性上,找不到官方文档 DOM0 是在 W3C 进行标准备化之前出现的,实际上是未形成标准的试验性质的初级阶段的 DOM. var tdiv = ...

  4. Python中import的使用方法

    源文出处: "import"的本质参照: Python中import机制 python导入自定义模块和包

  5. The server time zone value 'EDT' is unrecognized or represents more than one time zone

    解决: (1)使用 server mysql start命令启动mysql (2)在mysql中执行show variables like '%time_zone%'; (3)输入select now ...

  6. Vagrant 手册之 Vagrantfile - 配置版本

    原文地址 配置版本是 Vagrant 1.1+(引入了大量新功能和配置选项) 能够与 Vagrant 1.0.x Vagrantfiles 保持向后兼容的机制. 现在运行 vagrant init 时 ...

  7. Oracle系列:触发器、作业、序列、连接

    .Net程序员学用Oracle系列(8):触发器.作业.序列.连接   1.触发器 2.作业 2.1.作业调度功能和应用 2.2.通过 DBMS_JOB 来调度作业 3.序列 3.1.创建序列 3.2 ...

  8. C#=> 栈模仿堆的操作

    //原理,利用两个栈,互相作用,来模仿堆的效果,先进先出.. using System; using System.Collections.Generic; using System.Linq; us ...

  9. KVM操作命令

    1.查看KVM虚拟机配置文件 Kvm虚机创建 例子 /home/work/kvm-host一下操作目录 qemu-img create -f qcow2 test-Ws.qcow2 10G Test- ...

  10. LayaBox 常用技巧

    1.修改IDE的菜单 找到安装路径的LayaAirIDE\resources\app\out\vs\layaEditor\renders\laya.editorUI.xml 注意事项: 1.mask的 ...