链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数,

 function move(obj,attr,target,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
     //1,取当前值
var iCur=0;
if (attr == 'opacity') {
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
     //2,算速度
var speed = (target-iCur)/8
speed = speed>0?Math.ceil(speed):Math.floor(speed);
     //3,计时停止
if (iCur == target) {
clearInterval(obj.timer);
fn&&fn();//注意位置,要放在这里
}
else {
if (attr =='opacity') {
obj.style.opacity=(iCur+speed)/100;
}else{
obj.style[attr]=iCur+speed+'px';
}
} },30);
}

 对于以上框架,还有可以利用json对其进行优化,以上框架是每次改变一个属性,利用json则可以同时改变多个属性,详情见  下篇博文,JS之完美框架

JS之链式运动,及任意值运动框架,包括透明度的改变的更多相关文章

  1. js 运动函数篇(二) (加速度运动、弹性运动、重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...

  2. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  3. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  4. Dense.js - 响应式的视网膜(Rtina)图像支持

    Dense 是一款 jQuery 插件,它提供一个简单的方法为设备提供精密像素比的图像,为你的网站带来视网膜支持,清除模糊,图像更清晰.通过简单地包括 jQuery 插件的页面上,就能实现响应式的视网 ...

  5. ImageLightbox.js – 响应式的图片 Lightbox 插件

    ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...

  6. C++数据结构之链式队列(Linked Queue)

    C++数据结构之链式队列,实现的基本思想和链式栈的实现差不多,比较不同的一点也是需要注意的一点是,链式队列的指向指针有两个,一个是队头指针(front),一个是队尾指针(rear),注意指针的指向是从 ...

  7. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  8. 深入js隐式类型转换

    前言 相信刚开始了解js的时候,都会遇到 2 =='2',但是 1+'2' == '1'+'2'为false的情况,这时候应该会是一脸懵逼的状态,不得不感慨js弱类型的灵活让人发指,隐式类型转换就是这 ...

  9. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

随机推荐

  1. 打印java堆栈信息

    使用如下命令: kill -3 {pid} 可以打印指定线程的堆栈信息到tomcat的catalina.out日志中.在性能测试过程中,可以观察响应时间的曲线,如果突然出现波峰则抓取当前时间点tomc ...

  2. JTable,TableModel,DefaultTableModel与AbstractTableModel的小结

    1 表格JTable并不存储自己的数据,而是从表格模型那里获取它的数据 2 TableModel本身是一个interface,在这个interface里面定义了若干的方法,包括了存取表格字段(cell ...

  3. (转载)js 快捷键大全,并有简单使用说明

    摘要: (转载)原文链接: http://www.cnblogs.com/fire-phoenix/archive/2010/09/28/1837295.html Code highlighting ...

  4. [MFC美化] Skin++使用详解-使用方法及注意事项

    主要分为以下几个方面: 1.Skin++使用方法 2.使用中注意事项 一. Skin++使用方法 SkinPPWTL.dll.SkinPPWTL.lib.SkinPPWTL.h ,将三个文件及相应皮肤 ...

  5. Python基础之字符串

    字符串内置处理函数 1.capitalize() 描述: 将字符串的第一个字母变成大写,其他字母变小写. 示例: a= "hello world" print (a.capital ...

  6. noip 2016 提高组总结(不是题解)

    小弱鸡杨树辰是第一次参加像noip这样的高大上的比赛,于是他非常,非常,非常激动. 当他第二天考完试后,他正在yy自己的分数:day1T1应该是a掉了,T2写了个30分的暴力,T3也是个40分的暴力, ...

  7. 设计模式 -- 代理模式 (Proxy Pattern)

    定义: 为其他对象提供一种代理以控制对这个对象的访问: 角色: 1,抽象主题类,(接口或者抽象类),抽象真实主题和代理的共有方法(如下Subject类): 2,具体实现的主题类,继承或者实现抽象主题类 ...

  8. 《C++反汇编与逆向分析技术揭秘》——流程控制语句的识别

    if...else...语句 示例: if构成多分支语句 switch 有序线性的switch: 3E82D8位置存放了一个表,标明了要跳转到的地址: 这里的每四字节都标明的是每个case块的首地址: ...

  9. gmic全球移动互联网大会 全球九站已开启!

    由长城会主办的全球移动互联网大会( 简称GMIC)已成长为世界范围内最具影响力的辐射并连结东西半球的移动互联网商务平台,是最大规模的移动互联网行业盛会. 2017gmic全球移动互联网大会北京站将于2 ...

  10. Linux kernel Vhost-net 和 Virtio-net代码详解

    场景 Host上运行qemu kvm虚拟机,其中虚拟机的网卡类型为virtio-net,而Host上virtio-net backend使用vhost-net 数据包进入虚拟机代码分析 首先看vhos ...