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 ...
随机推荐
- RDIFramework.NETV2.9版本 Web新增至14套皮肤风格+三套界面组合（共42套皮肤组合）
客户的心声是最重要的,RDIFramework.NET V2.9版本不仅对WinForm版做了大的调整,Web版也彻彻底底的底翻上的优化了一篇,不仅增加了很多的新功能.新特色,用户最期望的界面风格也进 ...
- 使用inherit属性值继承其父元素样式来覆盖UA自带样式。
像button.input这样的表单控件,不同的浏览器都会有自己的样式风格(UA样式).我们可以使用inherit继承其父元素样式,从而覆盖浏览器的UA样式. button, input, selec ...
- haproxy log config
Step 4: Configuring logging Edit /etc/sysconfig/syslog SYSLOGD_OPTIONS=”-m 0 -r” ————————————————— ...
- 九步轻松实现SVN创建管理项目
本节向大家描述一下在Windows上使用Subversion中如何使用SVN创建管理项目,在这里和大家分享一下,欢迎大家一起来学习在 使用SVN创建管理项目的方法.首先看一下SVN介绍. Subver ...
- Winform 主窗体更换 构造函数传值
制作登录窗体: 制作一个登陆窗体,实现点击按钮关闭此窗体并打开另一个窗体 直接在按钮点击事件中,实例化一个想要打开的窗体 使用show方法打开,并把登陆窗体的visible属性改为false Form ...
- struts action和jsp之间的传值
一.jsp对Action传值 提交表单即可,Action的属性必须和表单的标签名字相同 二.Action对jsp传值: (1)利用session,(个人推荐) action中ActionContext ...
- Unicode、UTF-8、UTF-16和UTF-32的区别
Unicode是一个巨大的字符集,给世界上所有的字符定义了一个唯一编码.其仅仅规定了每个符号的二进制代码,没有制定细化的存储规则.UTF-8.UTF-16.UTF-32才是Unicode的存储格式定义 ...
- Prism 5 + MEF中的ModuleCatalog.CreateFromXaml问题
protected override IModuleCatalog CreateModuleCatalog() { return Microsoft.Practices.Prism.Modularit ...
- 关于ebox
看了介绍,觉得挺不错的东西,希望能够一路走下去 老话题STM32编程,新思路,一样是编程,味道却大有不同.这就是STM32之eBox编程.让你提议不一样的编程,让开发快到你意想不 ...
- linux bash快捷键
bash快捷键 CTRL+F 光标向前移动一个字母 CTRL+B 光标向后移动一个字母 CTRL+A HOME CTRL+E END