JS之链式运动,及任意值运动框架,包括透明度的改变
链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的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之链式运动,及任意值运动框架,包括透明度的改变的更多相关文章
- js 运动函数篇(二) (加速度运动、弹性运动、重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- Dense.js - 响应式的视网膜(Rtina)图像支持
Dense 是一款 jQuery 插件,它提供一个简单的方法为设备提供精密像素比的图像,为你的网站带来视网膜支持,清除模糊,图像更清晰.通过简单地包括 jQuery 插件的页面上,就能实现响应式的视网 ...
- ImageLightbox.js – 响应式的图片 Lightbox 插件
ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...
- C++数据结构之链式队列(Linked Queue)
C++数据结构之链式队列,实现的基本思想和链式栈的实现差不多,比较不同的一点也是需要注意的一点是,链式队列的指向指针有两个,一个是队头指针(front),一个是队尾指针(rear),注意指针的指向是从 ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 深入js隐式类型转换
前言 相信刚开始了解js的时候,都会遇到 2 =='2',但是 1+'2' == '1'+'2'为false的情况,这时候应该会是一脸懵逼的状态,不得不感慨js弱类型的灵活让人发指,隐式类型转换就是这 ...
- vue.js响应式原理解析与实现
vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...
随机推荐
- MAC OS U 盘制作与安装方法
伴随着 iMac 5K Retina 和新的 Mac mini 等硬件的发布,苹果终于都推出了 OS X Yosemite 系统正式版了!相信很多人都已经用上.不过对于一些不想升级,而是打算「全新安装 ...
- php计算几分钟前、几小时前、几天前的几个函数分享
/* * 精确时间间隔函数 * $time 发布时间 如 1356973323 * $str 输出格式 如 Y-m-d H:i:s * 半年的秒数为15552000,1年为31104000,此处用半年 ...
- Linux的一些简单命令(四)-用户和组账户管理
linux操作系统是一个多用户操作系统,它允许多用户同时登录到系统上并使用资源.系统会根据账户来区分每个用户的文件,进程,任务和工作环境,使得每个用户工作都不受干扰 1.保存用户信息的文件:/etc/ ...
- ajax使用json
json是什么什么的废话不说了,去百度吧.我这里介绍一下我为何要使用json.我使用ajax响应返回值时,项目中需求要返回多个值,不能只返回一个值.这时候就想起来用到json了.这可能只是json的一 ...
- PHP-FPM进程数的设定
近日,服务器出现异常,网站不能正常访问.经排查是php的问题. 在重启php-fpm时,恢复正常.1分钟之后又出现故障.查看php日志文件 /usr/local/php/var/log 后提示 WAR ...
- CodeForces 546D
Description 两个士兵在玩一个游戏,开始的时候第一个士兵选择一个数n,并把这个数交给第二个士兵,第二个士兵必须选择一个x满足x>1 且n能被x整除,然后将n变为n/x,然后把这个数交给 ...
- UltraISO PE(软碟通) V9.5.5.2960 官方中文版
软件名称: UltraISO PE(软碟通)软件语言: 简体中文授权方式: 免费试用运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 1.9MB图片预览: 软件简介 ...
- Saltstack 常用的模块及API
Saltstack提供了非常丰富的功能模块,设计操作系统的基础功能,常用工具支持等, 官网模块介绍 http://docs.saltstack.com/ref/modules/all/index.ht ...
- C#学习心得,记录学习
- Python学习之旅--第二周--python基础
一.什么是pyc? 1.Python是解释性语言,那么.pyc是什么文件? 2.解释性语言和编译型语言区别: 计算机是不能够识别高级语言的,所以当我们运行一个高级别语言程序时,就需要一个&quo ...