JavaScript “完美运动框架”
/* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move()。
* 大致结构如下:运动框架 EXP: move(obj,{width:200,height:200},fnEnd)
* obj: 运动物体
* json: 运动属性和运动目标值的json集合,{'width':200,'height':200}
* sv: 运动的速度,speed-value,值越小速度越大
* fnEnd: 运动结束后的回调函数
*/ 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));
}
//如果没有传入sv,则为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() end !
来自 <http://www.tangbc.com/blog/#frontends/104>
JavaScript “完美运动框架”的更多相关文章
- 【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...
- 完美运动框架(js)
一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...
- JavaScript的运动框架学习总结
一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...
- 2015.8.2js-19(完美运动框架)
/*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...
- JS完美运动框架【利用了Json】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript之运动框架2
运动框架2与运动框架1的不同之处在于,运动框架2是框架1的升级版,首先完善了传入值,改为move(obj,json,options),在options里面,可以选择传入或者不传入时间,运动形式,以及函 ...
随机推荐
- Puppet
一个完整的自动化运维包括系统安装.配置管理.服务监控三个方面.那今天咱们大家一起来学习一下Puppet实际运维中的案例.仅供参考,欢迎大家提更多的意见! 一.应用背景 某公司新到500台服务器,需要安 ...
- WPF 之 自定义窗体标题栏
在WPF中自定义窗体标题栏,首先需要将窗体的WindowStyle属性设置为None,隐藏掉WPF窗体的自带标题栏.然后可以在窗体内部自定义一个标题栏. 例如,标题栏如下: <WrapPanel ...
- 修改Intellij Idea 创建maven项目默认Java编译版本
在使用Intellij Idea 创建Maven项目时,默认的Java Language是1.5,虽然可以在Project Structrue中修改,但是每次pom.xml文件有变化时,工程又会重置到 ...
- AsyncTask的介绍
android AsyncTask介绍 AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接 ...
- UVa OJ 10071
Problem B Back to High School Physics Input: standard input Output: standard output A particle has i ...
- ubuntu 换源
经过自己一番折腾后,发现用这个方法换源最简单.直接. sudo vi /etc/apt/sources.list 把sources.list里面的内容全部替换为一下内容 deb http://mirr ...
- 数码相框之Makefile笔记
本程序的Makefile分为3类:1. 顶层目录的Makefile2. 顶层目录的Makefile.build3. 各级子目录的Makefile 一.各级子目录的Makefile: 它最简单,形式如下 ...
- Pascal 语言中约瑟夫问题:幸运观众
[题目]节目主持人准备从n名学生中挑选一名幸运观众,因为大家都想争当幸运观众,老师只好采取这样的办法:全体同学站成一列,由前面往后面依顺序报数.1,2,1,2……报单数的同学退出队伍,剩下的同学向前靠 ...
- 转:自建CDN防御DDoS(1, 2, 3)infoq
本文中提到的要点: 1. 针对恶意流的应对方法与策略.(基本上,中级的,顶级的) 2. IP分类的脚本 3. 前端proxy工具的选择与使用. 4. 开源日志系统的选择与比较. (http:/ ...
- hihocoder 1082 然而沼跃鱼早就看穿了一切(字符串替换)
时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 fjxmlhx每天都在被沼跃鱼刷屏,因此他急切的找到了你希望你写一个程序屏蔽所有句子中的沼跃鱼(“marshtomp”,不区 ...