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选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
随机推荐
- linux 进程通信之 管道和FIFO
进程间通信:IPC概念 IPC:Interprocess Communication,通过内核提供的缓冲区进行数据交换的机制. IPC通信的方式: pipe:管道(最简单) fifo:有名管道 mma ...
- 窗口间传送数据wsprintf,WM_SETTEXT,SendMessage的理解
对wsprintf API函数的理解: int wsprintf ( LPTSTR lpOut, // pointer to buffer for output LPCTSTR lpFmt, // ...
- VS中C#连接SQLite数据库处理器架构“x86”不匹配的问题
原文链接 https://www.cnblogs.com/zhaoliankun/p/9088200.html 我的环境配置:windows 64,VS,SQLite(点击下载),System.Dat ...
- C#List的创建例程
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- UWP开发入门(七)——下拉刷新
本篇意在给这几天Win10 Mobile负面新闻不断的某软洗地,想要证明实现一个简单的下拉刷新并不困难.UWP开发更大的困难在于懒惰,缺乏学习的意愿.而不是“某软连下拉刷新控件都没有”这样的想法. 之 ...
- Javascript中的名词
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (Document Object Model ...
- C/C++,python,java,C#月经贴问题
在刚开始的时候,一直纠结于语言之争,什么什么有前途,什么什么没前途.对于什么的支持不好啦,个人信仰问题啦.什么都有. 首先最主要的一个个人观点:“语言不是老婆,不是一夫一妻制”.你可以同时拥有许多的女 ...
- 转载文章 208 个最常见 Java 面试题全解析
最近正值春招,一直在给公司招聘 Java 程序员,我从 2015 年做 TeamLeader 开始就习惯性地收集平时遇到的 Java 技术问题或周围朋友见过的面试题,经过不断筛选,终于凝练成一套实用的 ...
- objectARX 关于MFC类向导 无法向此非CCmdTarget派生类添加任何命令 的解决方式
objectARX 关于MFC类向导 无法向此非CCmdTarget派生类添加任何命令 的解决方式 图文By edata ,转载注明出处 http://www.cnblogs.com/edata 1 ...
- 对于一些seo查询网站的整理
个人在查找网站seo问题时所使用的一些网站整理以及一些注意事项(同时感谢在处理问题过程中给予帮助的小伙伴们): 1.seo综合查询 (爱站网/站长工具)这俩工具的计算规则不相同所以计算结果出来也 ...