带回调函数的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毫秒 第三个, ...
随机推荐
- DateTime.Compare用法
DateTime.Compare(t1,t2)比较两个日期大小,排前面的小,排在后面的大,比如:2011-2-1就小于2012-3-2返回值小于零: t1 小于 t2. 返回值等于零 : t1 等于 ...
- Js制作的文字游戏
自己制作的文字游戏.(: <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- asp.net web api集成微信服务(使用Senparc微信SDK)
/// <summary> /// 微信请求转发控制器 /// </summary> [RoutePrefix("weixin")] public clas ...
- 清空IE缓存
1.打开IE Internet选项 点击设置 2.打开临时文件 点击 查看文件 将目录下的 文件全部删除 重新打开网站即可 到此IE缓存就被删除.
- 整理分享C#通过user32.dll模拟物理按键操作的代码
对系统模拟按键方面的知识和按键映射代码做了一下梳理,在这里分享出来,适用于开发自动操作工具和游戏外挂. 主代码: public const int KEYEVENTF_EXTENDEDKEY = 0x ...
- cesium+ geoserverTerrainProvide+png展示3D高程图展示
一.发布png到geoserver的imagepyramid // translate png to tif epsg:4326 File png = new File(pngPathStr); Bu ...
- photo shop替换颜色(自己指定的颜色)
点开"选择"-"色彩范围",在选择下拉菜单里选"取样颜色",吸取图片上的要改的颜色,"确定",左下角拾色器前景色用你希望 ...
- Markdown 基本入门使用
http://www.appinn.com/markdown/ markdown快速入门Markdown 常用语法: # 标题 强调:用星号(*)和底线(_)作为标记强调字词的符号,如果你的 * 和 ...
- [erlang]supervisor(监控树)的重启策略
1. init函数 init() -> {ok, {SupFlags, [ChildSpec,...]}} | ignore. [ChildSpec,...] 是在init之后默认要启动的子进程 ...
- Linux添加/删除用户和用户组
声明:现大部分文章为寻找问题时在网上相互转载,在此博客中做个记录,方便自己也方便有类似问题的朋友,故原出处已不好查到,如有侵权,请发邮件表明文章和原出处地址,我一定在文章中注明.谢谢. 本文总结了Li ...