带回调函数的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毫秒 第三个, ...
随机推荐
- OC对象的归档及解档浅析
一般用在用户登录,保存这个用户的信息 对象归档,就是把内存中对象持久化. 对象解档,就是把持久化的对象读取到内存. oc中对象归档解档大致分为以下几种方法: 从数量上可以分为: 对单个对象归档解档 对 ...
- 从SQL下载大量数据到Excel
之前不知设计原理,发生了大量数据(超过100w行)直接从数据库读取加载到网页中,直接导致内存溢出. Rediculous! 所以,现在改为分页查询到页面中. 由于其有全局逻辑,故折中每次加载1w条数据 ...
- JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)
一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...
- maxiang conf
/**设置你自己的CSS.例如:h1 {border-bottom: 1px solid #ccc;line-height:1.6;}body {background:#FDFFD0} **/ p ...
- Request header is too large
当request url过长的时候,经常tomcat后台就会包 "Request header is too large"错误. 解决方法:修改server.xml文件,linux ...
- ELK:kibana使用的lucene查询语法【转载】
kibana在ELK阵营中用来查询展示数据 elasticsearch构建在Lucene之上,过滤器语法和Lucene相同 全文搜索 在搜索栏输入login,会返回所有字段值中包含login的文档 使 ...
- Kinect2在线重建(Tracking and Mapping)
前言 个人理解错误的地方还请不吝赐教,转载请标明出处,内容如有改动更新,请看原博:http://www.cnblogs.com/hitcm/ 如有任何问题,feel free to ...
- WPF 动态更换样式文件
ApplySkinFromMenuItem("Style/BigImgStyle.xaml", "Style/FileListStyle.xaml"); //换 ...
- Java中四种引用:强、软、弱、虚引用
这篇文章非常棒:http://alinazh.blog.51cto.com/5459270/1276173 Java中四种引用:强.软.弱.虚引用 1.1.强引用当我们使用new 这个关键字创建对象时 ...
- cvInRangeS函数演示
camshift算法中,用到了cvInRangeS函数,作为初学者,对这个函数很不理解,所以就写了个程序演示效果,加强理解. 代码: #include "cv.h" #includ ...