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 ...
随机推荐
- C和C++中的名字空间和作用域
C和C++中的名字空间和作用域 C语言中有名字空间这个概念吗? 提到名字空间(或者可能更普遍的叫法,命名空间),很可能先想到的是C++,甚至是C#.C中没有名字空间吧?一开始我也是这样认为的,直到我看 ...
- poj 1742 多重背包
题意:给出n种面值的硬币, 和这些硬币每一种的数量, 要求求出能组成的钱数(小于等于m) 思路:一开始直接用多重背包套上去超时了,然后就没辙了,然后参考网上的,说只需要判断是否能取到就行了,并不需要记 ...
- JavaScript学习日志(四):BOM
BOM的核心对象就是window,这一章没什么好说的,总结一些比较常用的: 1,a未定义,a; //报错window.a; //undefined 不能用delete删除全局变量 2,html5不支持 ...
- [Vue安装教程]十分钟学会vue 安装
Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...
- MySQLzip archive版本(5.7.19)安装教程
1. 从官网下载zip archive版本http://dev.mysql.com/downloads/mysql/ 2. 解压缩至相应目录,并配置环境变量(将*\bin添加进path中): 3. ...
- 结构体(struct)大小
结构体(struct)大小 本文参考链接:C语言结构体(struct)常见使用方法,链接中的实例代码经实践有几处不准确,本文在引用时已做更改 注意:在结构体定义时不能申请空间(除非是结构体变量),不可 ...
- 201521123089 《Java程序设计》第3周学习总结
1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2. 书面作 ...
- 201521123119《Java程序设计》第1周学习总结
1.本周学习总结 1.Java语言是一种多用途的语言.并发的语言.以类为基础,面向对象的语言. 2.Java比C++更加方便,有辅助输入,编写速度大大加快. 3.Java根据应用领域不同,区分为 ...
- 201521123055 《Java程序设计》第14周学习总结
1. 本章学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) 利 ...
- 201521123067 《Java程序设计》第12周学习总结
201521123067 <Java程序设计>第12周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对 ...