这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求。

/*
功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动
版本:V1.0
兼容性:Chrome,FF,IE8+ (opera没测)
备注:参考了智能社blur老师的代码
*/ /*--------------------------------------------------------
功能: 获取某个节点下的带有某个class的所有节点
输入: oParent:要获取的class元素的父级节点
sClass:要获取的元素的class名称
输出: 获取到的节点数组
--------------------------------------------------------*/
function getElementsByClassName(oParent, sClass){
var oEle = oParent.getElementsByTagName('*');
var result = [];
for (var i = 0; i < oEle.length; i++) {
if(oEle[i].className == sClass){
result.push(oEle[i]);
}
}
return result;
} /*--------------------------------------------------------
功能: 获取某个对象的属性的具体数值
输入: obj:对象
sName:属性
输出: 属性值,注意透明度输出最大为100,不是1
--------------------------------------------------------*/
function getStyle(obj, sName){
var opacityFactor = 1;//如果是透明度属性,值为100,其他属性,值为1
if(sName == 'opacity'){
opacityFactor = 100;
}
if(obj.currentStyle){//IE
return parseFloat(obj.currentStyle[sName]) * opacityFactor;
}else{//非IE
return parseFloat(getComputedStyle(obj, false)[sName]) * opacityFactor;
}
} /*--------------------------------------------------------
功能: 获取json对象的长度
输入: json:json对象
输出: json对象的长度
--------------------------------------------------------*/
function getJsonLength(json){
var jsonLength = 0;
for(var i in json){
jsonLength++;
}
return jsonLength;
} /*--------------------------------------------------------
功能: 多个属性值同时变化,可以变高,可以变低
输入: obj:要运动的对象
property:属性名,比如'height'
iTarget:运动结束之后的属性值,比如1000。如果是透明度,100代表全透明。
endFunc(可选):运动结束之后执行的函数
输出: 无
备注: 如果是多物体,那么每个物体都要添加一个全局的timer(定时器)属性
--------------------------------------------------------*/
function startMove(obj, json, endFunc){
clearInterval(obj.timer);//清除定时器,解决对同一个定时器调用startMove定时器叠加的问题
var thisStyle = 0;//此时的样式值
var speed = 0;//移动速度
var bStop = true;//假设,刚开始所有的属性都达到了所设置的属性值
var jsonLength = getJsonLength(json); obj.timer = setInterval(function(){
/*
每次循环的时候,如果一个属性的值达到设定的目标,则把i加1,
最后检测如果i与json的长度一样,说明每个属性值都达到的目标,
则开启定时器并执行endFunc
*/
var i = 0;
for(var attr in json){
thisStyle = parseFloat(getStyle(obj, attr));
speed = (json[attr] - thisStyle) / 5;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(speed >= 0 && thisStyle >= json[attr]){//从小往大变化的停止条件
i++;
}else if(speed <= 0 && thisStyle <= json[attr]){//从大往小变化的停止条件
i++
}else{//没达到停止的条件,继续运动
if(attr != 'opacity'){//如果不是设置透明度
obj.style[attr] = thisStyle + speed + 'px';
}else{//如果设置透明度
obj.style[attr] = (thisStyle + speed) / 100 ;
obj.style.filter = 'alpha(opacity:' + (thisStyle + speed) + ')';
}
}
}
if(i == jsonLength){
clearInterval(obj.timer);
if(endFunc) {endFunc();}
}
},30);
}

可以看到在Chrome,FF,IE8+下可以完美运行。

我是JS新手,如果有更好,更方便的实现方案,欢迎各位留言交流。

另外:前端求职ing

JS完美运动框架的更多相关文章

  1. JS完美运动框架【利用了Json】

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. js 完美运动框架

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

  3. 完美运动框架(js)

    一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...

  4. JS 之完美运动框架

    完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...

  5. 【repost】JavaScript完美运动框架的进阶之旅

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

  6. JavaScript “完美运动框架”

    /* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...

  7. 2015.8.2js-19(完美运动框架)

    /*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...

  8. Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  9. 纯js写“运动”框架

    所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...

随机推荐

  1. BestCoder Round #68 (div.2) 1002 tree

    题意:给你一个图,每条边权值0或1,问每个点周围最近的点有多少个? 思路:并查集找权值为0的点构成的连通块. #include<stdio.h> #include<string.h& ...

  2. javascript设计模式6

    单体模式:用来划分命名空间而组织一些方法和属性的对象,如果它能被实例化,只能被实例化一次:但对象不是单体 var Singleton={ attr1:true; attr2:2, method1:fu ...

  3. android NDK 实用学习(二)-java端对象成员赋值和获取对象成员值

    1,关于java端类及接口定义请参考: android NDK 实用学习-获取java端类及其类变量 2,对传过来的参数进行赋值: 对bool类型成员进行赋值  env->SetBooleanF ...

  4. HW6.11

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  5. Use ALTER DATABASE to Move Databases

    Use ALTER DATABASE to Move Databases Follow Our Daily Tips •facebook.com/TechNetTips• twitter.com/Te ...

  6. CodeForces 456D&455B--A Lot of Games(Trie+博弈)

    题意:给n个字符串.进行k次游戏.每局开始,字符串为空串,然后两人轮流在末尾追加字符,保证新的字符串为集合中某字符串的前缀,不能操作者输,新一轮由上一句输的人先手. 题解: #看到此题毫无头绪,队友写 ...

  7. 问题-Delphi 中使用TStringList后,报out of memory 的解决方法

    问题现象: 请一段开发个项目 程序调试全部通过但测试时出现个问题 “out of memory” 在长时间运行时!后来终于解决 :很简单其实就是object.create时对象没有释放. 代码如下: ...

  8. shmget() -- 建立共享内存

    #include <sys/ipc.h>#include <sys/shm.h>int shmget(key_t key, size_t size, int shmflg); ...

  9. elecworks 报表----按线类型的电线清单

    按线类型的电线清单中:列Wire number指的是线标注,不是电位标注 section:截面积

  10. [OC Foundation框架 - 10] NSDictionary

    通过唯一的key找到相应的value,类似于Map NSDictionary是不可变的   1.创建 void dicCreate() { //Immutable // NSDictionary *d ...