Javascript之链式运动框架1
第一部分：HTML内容：
<script src="6-1.js"></script>
<script>
window.onload=function(){
var oDiv=document.getElementById('div');
var timer=null;
oDiv.onclick=function(){
move(oDiv,600,3000,'width',function(){
move(oDiv,600,3000,'left');
});
};
}
</script>
</head>
<body>
<div id="div"></div>
</body>
第二部分：6-1.js内容：
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name]
}
}
function move(obj,iTarget,time,name,fn){
var timer=null;
clearInterval(obj.timer);
var start=parseFloat(getStyle(obj,name));//getstyle传的是带单位的，所以要加parsefloat，并且便于对opacity进行转换。
var dis=iTarget-start;
var count=Math.floor(time/30);
var step=dis/count;
var n=0;
obj.timer=setInterval(function(){
n++;
var cur = start + n * dis / count;
if(name=='opacity'){
obj.style.opacity=cur;
obj.style.filter = 'alpha(opacity:' + cur * 100 + ')';
}else{
obj.style[name]=cur+'px';
}
if(n==count){
clearInterval(obj.timer);
fn && fn();
}
},30)
}
因为封装好了框架，所以，在进行类似的代码的编写的时候，可以直接调用move函数。
Javascript之链式运动框架1的更多相关文章
- javascript链式运动框架案例
javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...
- Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
- （43）JS运动之链式运动框架
链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个參数function,这个function表示下一个要运行的动作.详细代码例如以下: <!DOCTYPE HTML> &l ...
- JS之链式运动，及任意值运动框架，包括透明度的改变
链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...
- js动画之链式运动
链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...
- day40—JavaScript多物体运动框架
转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...
- JavaScript之链式结构序列化
一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...
- JavaScript之链式结构序列化1
一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...
- javascript学习之运动框架
模仿新浪博客首页的,最新评论: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"&g ...
随机推荐
- 委托（delegate）的三种调用方式：同步调用，异步调用，异步回调（转载）
下面为即将被调用的方法: public delegate int AddHandler(int a,int b); public class 加法类 { public static int Add(i ...
- CentOS编译安装PHP 7.0
问题1: Cannot find ldap.h 解决办法: yum install openldapyum install openldap-devel 问题2: Cannot find ldap l ...
- 修改git commit默认触发的编辑器
使用git commit会自动启动编辑器编辑本次提交的comment,git默认配置是GNU nano,但是很多人不是很熟悉(我就是),其实这个是可以自行配置的. 编辑制定代码库的.git/confi ...
- Oracle常用操作-----（一）
Oracle创建约束: ALTER TABLE 表名 ADD CONSTRAINT 约束名 约束内容. [注]Oracle中的default是一个值,而sql server中的default是一个约束 ...
- SpringMVC学习系列（3） 之 URL请求到Action的映射规则
在系列(2)中我们展示了一个简单的get请求,并返回了一个简单的helloworld页面.本篇我们来学习如何来配置一个action的url映射规则. 在系列(2)中我们在HelloWorldContr ...
- div显示滚动条
div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border:1px solid;"& ...
- sdutoj 2608 Alice and Bob
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2608 Alice and Bob Time L ...
- strits2初始配置总结
**************************************************************************************************** ...
- php 安装 sphinx
我的环境是 ubuntun ,所以 第一步 sudo apt-get install pear 第二,根据 php.net 里说的,去下载 sphinx. 第三,pecl install sphinx ...
- 0523 Scrum 项目6.0
团队名称:√3 团队目标:全力完成这次的项目 团队口号:我要改变世界,改变自己!!! 演讲稿:我们的产品 鸡汤精选 是为了解决 当下社会出现的太多的负能量使得人们的内心十分 的痛苦, 他们需要强大的正 ...