2-5 js基础-简易运动框架
'use strict';
function getStyle(obj,sName){
return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
//function move(obj,json,time,type,fn)
function move(obj,json,options){
options=options||{};
options.time=options.time||700;
options.type=options.type||'linear';
var start={};
var dis={};
for(var name in json){
start[name]=parseInt(getStyle(obj,name));
if(isNaN(start[name])){
//加默认值
switch(name){
case 'left':
start[name]=obj.offsetLeft;
break;
case'top':
start[name]=obj.offsetTop;
break;
case'width':
start[name]=obj.offsetWidth;
break;
case'Height':
start[name]=obj.offsetHeight;
break
case'opacity':
start[name]=1;
break;
case'border':
start[name]=0;
}
}
dis[name]=json[name]-start[name];
}
var count=Math.floor(options.time/30);
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
var ocr='';
for(var name in json){ switch(options.type){
case'linear':
var a=n/count;
ocr=start[name]+a*dis[name];
break;
case'ease-in':
var a=n/count;
ocr=start[name]+Math.pow(a,3)*dis[name];
break;
case'ease-out':
var a=(1-n/count);
ocr=start[name]+(1-Math.pow(a,3))*dis[name];
break;
}
if(name=='opacity'){
obj.style[name]=ocr;
obj.style[name]='filter:alpha(opacity='+ocr*100+')';
}else{
obj.style[name]=ocr+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.end&&options.end();
}
},30);
}
2-5 js基础-简易运动框架的更多相关文章
- 使用Node.js实现简易MVC框架
在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...
- [转] 使用Node.js实现简易MVC框架
在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...
- JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...
- 原生JS封装animate运动框架
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- JS 之完美运动框架 如何同时改变元素多个属性?
正如改变一个属性的方法,可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做, 调用两次运动函数,如同时改变宽和高,move(obj,'width',tar ...
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- JavaScript 基础入门11 - 运动框架的封装
目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...
- js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
随机推荐
- mysql查看数据库性能常用命令
mysql> show global status; 可以列出MySQL服务器运行各种状态值,另外,查询MySQL服务器配置信息语句: mysql> show variables; 一.慢 ...
- DotNetBar.MetroTilePanel 样式、加载数据、获取数据
描述下:MetroTilePanel包含子集ItemContainer 子集下面又包含子集MetroTileItem 目前我用到的就是这三层 因为需求所以整个模块全部由代码实现 1.ItemCon ...
- File Path Directory总结
阅读目录 开始 Path 对路径 字符串进行操作 获得后缀 能合并路径 获取文件名 Directory和DirectoryInfo 对目录进行操作 判断目录是否存在 创建目录 删除目录 获取目录下所 ...
- Sql语法高级应用之四:使用视图实现多表联合数据明细
之前章节我们讲到:如果某个表的数据是多个表的联合,并且存在列与列的合并组成新列,用视图是最好的方案. 下面我分享两个个真实的SQL语句案例 USE Wot_Inventory GO FROM sys. ...
- Sql语法高级应用之二:视图
SQL CREATE VIEW 语句 什么是视图? 在 SQL 中,视图是基于 SQL 语句的结果集的可视化的表. 视图包含行和列,就像一个真实的表.视图中的字段就是来自一个或多个数据库中的真实的表中 ...
- MaxScript镜像函数
看到有网友需要写的,其实镜像就是缩放改为负数 Fn MirrorObject argObjects argAxisName = ( local axisNames = #(#x,#y,#z) do ( ...
- Websphere中获取项目下.properties路径
一:如果容器为Websphere,那下面为红色的地方不能加"/",如果为tomcat,则加上"/", String path = this.class.get ...
- python中的基本数据类型(int,bool,str)及字符串操作
一. 基本数据类型概况 1. int 整数,主要用来进行数学运算 2. str 字符串,可以保存少量数据并进行相应的操作 3. bool 布尔值,判断真假,True,False 4. list ...
- 467. Unique Substrings in Wraparound String
Consider the string s to be the infinite wraparound string of "abcdefghijklmnopqrstuvwxyz" ...
- createQuery与createSQLQuery区别
该篇文章也贴上来: hibernate 中createQuery与createSQLQuery两者区别是:前者用的hql语句进行查询,后者可以用sql语句查询前者以hibernate生成的Bean为对 ...