带回调函数的js运动框架
function startMove(obj, json, endFun) {
//开始前关闭之前obj上的定时器
clearInterval(obj.timer);
//定时器
obj.timer = setInterval(function() {
var bStop = true; //假设所有值都到目标
for(var attr in json) {//循环json数组
//单独处理透明度
if(attr == 'opacity') {
var cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
var cur = parseInt(getStyle(obj, attr));
}
//速度处理
var speed = (json[attr] - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//如果当前的没到目标值
if(cur != json[attr])
bStop = false;
//运动
if(attr == 'opacity') {
obj.style.opacity = (cur + speed) / 100;
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
} else {
obj.style[attr] = cur + speed + 'px';
}
}
//所有的都到达目标值
if(bStop) {
clearInterval(obj.timer);
if(endFun) endFun();
}
}, 30); }
带回调函数的js运动框架的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js 运动框架-轻量级
具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- Easyui中 alert 带回调函数的 消息框
带回调函数的 消息框: $.messager.alert({ title:'消息', msg:'电话号码 只能是数字!', icon: 'info', width: 300, top:200 , // ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- js运动框架 step by step
开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...
- 详解回调函数——以JS为例解读异步、回调和EventLoop
回调,是非常基本的概念,尤其在现今NodeJS诞生与蓬勃发展中变得更加被人们重视.很多朋友学NodeJS,学很久一直摸不着门道,觉得最后在用Express写Web程序,有这样的感觉只能说明没有学懂 ...
- js运动框架之掉落的扑克牌(重心、弹起效果)
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
随机推荐
- 网络TCp数据的传输设计(黏包处理)
//1.该片为引用别人的文章:http://www.cnblogs.com/alon/archive/2009/04/16/1437599.html 解决TCP网络传输"粘包"问题 ...
- BestCoder Round #90 //div all 大混战 一题滚粗 阶梯博弈,树状数组,高斯消元
BestCoder Round #90 本次至少暴露出三个知识点爆炸.... A. zz题 按题意copy Init函数 然后统计就ok B. 博弈 题 不懂 推了半天的SG..... 结果这 ...
- Mac 终端命令大全
目录操作 命令名 功能描述 使用举例 mkdir 创建一个目录 mkdir dirname rmdir 删除一个目录 rmdir dirname mvdir 移动或重命名一个目录 mvdir dir1 ...
- 启动Tomcat时报 Expected stackmap frame at this location.(JDK1.7编译)
从svn上下的项目,部署到tomcat 7.0.19 上, 并且配置的是jdk7. 启动时出现以下问题. Location: com/genlot/loms/service/SysPermissio ...
- KVM 虚拟化 初体验
KVM 是 Kernel-based Virtual Machine 的简称,是 Linux 下 x86 硬件平台上的全功能虚拟化解决方案: 使用 KVM ,可允许运行多个虚拟机,包括 Linux 和 ...
- Java重点之小白解析--浅谈HashMap与HashTable
这是一个面试经常遇到的知识点,无论什么公司这个知识点几乎是考小白必备,为什么呢?因为这玩意儿太特么常见了,常见到你写一百行代码,都能用到好几次,不问这个问哪个.so!本小白网罗天下HashMap与Ha ...
- APP如何实现推送功能
一.推送功能的集成 (1)在Umeng开发者中心,申请新应用,开通推送功能.此时需要上传开发推送证书和生产推送证书的p12文件. 申请证书的流程如下: >>1 创建开发推送证书 >& ...
- Android开发学习---sharedpreference的使用
在前面文章中,为了使数据回显,使用的技术思路是,首先,将数据持久化写到ROM或者SDCard中,其中name和password以":"分隔;然后,将数据记取出来,再用split方法 ...
- [转] Oracle analyze table 使用总结
转自:http://www.cnblogs.com/einyboy/archive/2012/08/09/2630321.html analyze table 一般可以指定分析: 表,所有字段,所有索 ...
- 使用 Sandcastle 生成代码帮助文档
使用 Sandcastle可以生成MSDN风格的帮助文档,生成的帮助文档既可以是chm文档,也可以是MS Help 2.x帮助文档. 1 下载并安装Sandcastle Sandcastle下载地址为 ...