具体代码如下:

  

function move(obj,json,sv,fnEnd){
//CSS样式值
function getStyle(obj,attr){
if(obj.currentStyle) {return obj.currentStyle[attr];}
else {return getComputedStyle(obj,false)[attr];}
}
//运动
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var isAllCompleted=true; //假设全部运动都完成了
for(attr in json){
var attrValue=0;
switch(attr){
case 'opacity':
attrValue=Math.round(parseFloat(getStyle(obj,attr))*100);break;
default:
attrValue=parseInt(getStyle(obj,attr));
}
//默认速度4
var speed=(json[attr]-attrValue)/(sv||4);
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//如果循环过程中存在尚未结束的运动,isAllCompleted为假
if(attrValue!=json[attr]) isAllCompleted=false;
switch(attr){
case 'opacity': {
obj.style.filter="alpha(opacity="+(attrValue+speed)+")";
obj.style.opacity=(attrValue+speed)/100;
}; break;
default:obj.style[attr]=attrValue+speed+'px';
}
}//for in end!
//所有循环结束后,只有当全部运动结束后(isAllCompleted=true)时才关闭定时器
if(isAllCompleted){
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
},30);
}

  运动框架 : 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. How to pass values across the pages in ASP.net without using Session

    https://stackoverflow.com/questions/14956027/how-to-pass-values-across-the-pages-in-asp-net-without- ...

  2. Latex数学公式中的矩阵

    目录 矩阵的括号形式 array环境 上三角矩阵 分块矩阵 行内矩阵 矩阵的括号形式 使用matrix.pmatrix.bmatrix.Bmatrix.vmatrix或者Vmatrix环境: $$ \ ...

  3. Effect Hook

    1 数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用. 2 可以把 useEffect Hook 看做 componentDidMount,componentDidUpdat ...

  4. 配置adb环境与简单命令

    adb命令具有安装卸载apk,拷贝推送文件,查看设备硬件信息,查看应用程序占用资源,在设备执行shell命令等 客户端:通过adb调用客户端 服务器server:运行后台,负责客户端与进程进行通信 守 ...

  5. c# Autofac依赖注入

    public class Container { /// <summary> /// IOC容器 /// </summary> public static IContainer ...

  6. package和import语句_5

    J2SDK中主要的包介绍   java.lang—包含一些Java语言的核心类,如String.Math.Integer.System和 Thread,提供常用功能. java.awt—包含了构成抽象 ...

  7. 【报错】An error happened during template parsing (template: "class path resource [templates/hello1.html]")

    页面显示: Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing t ...

  8. Docker配置远程访问

    近来学习Docker部署微服务,需要配置Docker的远程访问,由于实际环境和学习资料有出入,尝试着根据网上搜索的一些相关资料进行配置,未能成功.最终通过自己摸索,成功配置Docker远程访问.现和大 ...

  9. 9、numpy——数组操作

    Numpy 中包含了一些函数用于处理数组,大概可分为以下几类: (1)修改数组形状 (2)翻转数组 (3)修改数组维度 (4)连接数组 (5)分割数组 (6)数组元素的添加与删除 1.修改数组形状 函 ...

  10. java 关于泛型的一些知识点

    public class Generic <T>{ private T ob; public Generic(T ob){ this.ob=ob; } public T GetOb(){ ...