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运动框架的更多相关文章

  1. 带无缝滚动的轮播图(含JS运动框架)

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js 运动框架-轻量级

    具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...

  3. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  4. Easyui中 alert 带回调函数的 消息框

    带回调函数的 消息框: $.messager.alert({ title:'消息', msg:'电话号码 只能是数字!', icon: 'info', width: 300, top:200 , // ...

  5. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  6. js运动框架 step by step

    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...

  7. 详解回调函数——以JS为例解读异步、回调和EventLoop

      回调,是非常基本的概念,尤其在现今NodeJS诞生与蓬勃发展中变得更加被人们重视.很多朋友学NodeJS,学很久一直摸不着门道,觉得最后在用Express写Web程序,有这样的感觉只能说明没有学懂 ...

  8. js运动框架之掉落的扑克牌(重心、弹起效果)

    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...

  9. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

随机推荐

  1. 后台dom拼接xml,动态显示统计图

    这个东西让我好生头疼,贴代码吧 // 两秒后模拟点击 setTimeout(function() { // IE if(document.all) { document.getElementById( ...

  2. POJ3061 尺取法

    题目大意:从给定序列里找出区间和大于等于S的最小区间的长度. 前阵子在zzuli OJ上见过类似的题,还好当时补题了.尺取法O(n) 的复杂度过掉的.尺取法:从头遍历,如果不满足条件,则将尺子尾 部增 ...

  3. WCF通过SVCUtil.exe生成客户端代理类和配置文件(转)

    WCF服务调用通过两种常用的方式: 1:一种是借助代码生成工具SvcUtil.exe或者添加服务引用的方式. 2:一种是通过ChannelFactory直接创建服务代理对象进行服务调用. 本文只针对通 ...

  4. Java(接口与继承)动手动脑

    1>继承条件下的构造方法调用 运行 TestInherits.java 示例,观察输出,注意总结父类与子类之间构造方法的调用关系修改 Parent 构造方法的代码,显式调用 GrandParen ...

  5. js闭包使用

    闭包就是在一个函数内定义一个内部函数 并返回内部函数 function f1(){ var a=1; add=function(){a=a+1;} function f1Sub(){ console. ...

  6. div的一些易出错地方

    1.div中放一张图片老是显示不出来? 解决方法如下: 设置一下div的宽度与高度,然而此时直接写width与height是不对的,对于块级元素没有这个属性,只能在style="width: ...

  7. PHP函数的实现原理及性能分析

    前言 在任何语言中,函数都是最基本的组成单元.对于php的函数,它具有哪些特点?函数调用是怎么实现的?php函数的性能如何,有什么使用建议?本文将从原理出发进行分析结合实际的性能测试尝试对这些问题进行 ...

  8. QlikView 权限设置问题和注意

    企业级报表通常都涉及到复杂的权限问题, 比如文本级权限和行级权限,某区域经理只能看到该区域的销售数据.QlikView自然也提供了该种功能. 具体方法: 在Edit script中新建一个tab, 输 ...

  9. cut笔记

    cut -f 2,3 file.txt                                #查看第2.3列的信息,列分隔符默认为空格符 指定分隔符使用-d选项,如: cut -f 2,3 ...

  10. vs2013卸载后重新安装不能用了,如何解决

    vs2013卸载后重新安装不能用了 据说VS卸载后有残留文件,估计是注册文件没删除,弄了很多方法,最后只有重装.你可以下载一个cclearn清理注册表,再装试试 我卸载完用360清理了一下 之后再安装 ...