JS封装运动框架(另一种写法)
function animate(obj, json, interval, sp, fn) {
clearInterval(obj.timer);
//var k = 0;
//var j = 0;
function getStyle(obj, arr) {
if(obj.currentStyle){
return obj.currentStyle[arr]; //针对ie
} else {
return document.defaultView.getComputedStyle(obj, null)[arr];
}
}
obj.timer = setInterval(function(){
//j ++;
var flag = true;
for(var arr in json) {
var icur = 0;
//k++;
if(arr == "opacity") {
icur = Math.round(parseFloat(getStyle(obj, arr))*100);
} else {
icur = parseInt(getStyle(obj, arr));
}
var speed = (json[arr] - icur) * sp;
speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
if(icur != json[arr]){
flag = false;
}
if(arr == "opacity"){
obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
obj.style.opacity = (icur + speed)/100;
}else {
obj.style[arr] = icur + speed + "px";
}
//console.log(j + "," + arr +":"+ flag);
}
if(flag){
clearInterval(obj.timer);
//console.log(j + ":" + flag);
//console.log("k = " + k);
//console.log("j = " + j);
//console.log("DONE");
if(fn){
fn();
}
}
},interval);
}
JS封装运动框架(另一种写法)的更多相关文章
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- 第61天:json遍历和封装运动框架(多个属性)
一.json 遍历 for in 关键字 for ( 变量 in 对象) { 执行语句; } 例如: var json = {width:200,height:300,left:50}co ...
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- js中创建命名空间的几种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...
- 在js中创建命名空间的几种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'H ...
- JS完美运动框架【利用了Json】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...
- js中运动框架的封装
//获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.curr ...
随机推荐
- JVM中锁优化,偏向锁、自旋锁、锁消除、锁膨胀
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt364 本文将简单介绍HotSpot虚拟机中用到的锁优化技术. 自旋锁 互斥同 ...
- 3_SQL Server通过代码的方式添加数据
--通过代码添加数据 --第一种方式--insert into 表名(列名1,列名2,...)values (值1,值2,...)insert into Department(DepName, Dep ...
- EF实例创建问题
场景:CodeFirst 情况下,在控制器新建一个EF数据库对象,以便运行时进行表的初始化创建 Private DemoContext db=new DemoContext (): 问题:什么时候释放 ...
- Tinyhttpd 代码学习
前阵子,参加了实习生面试,被面试官各种虐,问我说有没有读过一些开源的代码.对于只会用框架的我来说真的是硬伤啊,在知乎大神的推荐下在EZLippi-浮生志找了一些源代码来阅读,于是从小型入手,找了Tin ...
- 在数组a中,a[i]+a[j]=a[k],求a[k]的最大值,a[k]max——猎八哥fly
在数组a中,a[i]+a[j]=a[k],求a[k]的最大值,a[k]max. 思路:将a中的数组两两相加,组成一个新的数组.并将新的数组和a数组进行sort排序.然后将a数组从大到小与新数组比较,如 ...
- 201521123084 《Java程序设计》第14周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结数据库相关内容. answer: 2. 书面作业 1. MySQL数据库基本操作 1.1 建立数据库test.表studen ...
- 团队作业4----第一次项目冲刺(Alpha版本)4.25
a.提供当天站立式会议照片 会议内容: ①:对有的接口编写遇到的困难,由于基础问题,建议百度,谷歌现成的接口 ②:课程较多,时间不够,任务的调整以及进度的调整 b. 每个人的工作 每个人在尽量完成自己 ...
- 201521123082 《Java程序设计》第8周学习总结
201521123082 <Java程序设计>第8周学习总结 标签(空格分隔):Java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 ...
- 201521123044 《Java程序设计》第5周学习总结
1. 本章学习总结 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 答: ...
- 201521123056 《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.1 instanceof 测试一个对象是否是某个类的实例,即使左边是右边类的子类的实例对 ...