js 运动框架-轻量级
具体代码如下:
function move(obj,json,sv,fnEnd){
//CSS样式值
function getStyle(obj,attr){
if(obj.currentStyle) {return obj.currentStyle[attr];}
else {return getComputedStyle(obj,false)[attr];}
}
//运动
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var isAllCompleted=true; //假设全部运动都完成了
for(attr in json){
var attrValue=0;
switch(attr){
case 'opacity':
attrValue=Math.round(parseFloat(getStyle(obj,attr))*100);break;
default:
attrValue=parseInt(getStyle(obj,attr));
}
//默认速度4
var speed=(json[attr]-attrValue)/(sv||4);
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//如果循环过程中存在尚未结束的运动,isAllCompleted为假
if(attrValue!=json[attr]) isAllCompleted=false;
switch(attr){
case 'opacity': {
obj.style.filter="alpha(opacity="+(attrValue+speed)+")";
obj.style.opacity=(attrValue+speed)/100;
}; break;
default:obj.style[attr]=attrValue+speed+'px';
}
}//for in end!
//所有循环结束后,只有当全部运动结束后(isAllCompleted=true)时才关闭定时器
if(isAllCompleted){
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
},30);
}
运动框架 : move(obj,propertiesJson,speed,fnCallBack)
obj: 运动物体
propertiesJson: 运动属性和运动目标值的json集合,{'opacity':100}
speed: 运动的速度,speed-value,值越小速度越大
fnCallBack: 运动结束后的回调函数
此框架可以实现多个参数,多个物体运动互不影响。
js 运动框架-轻量级的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- js 运动框架及实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- js运动框架之掉落的扑克牌(重心、弹起效果)
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
- js运动框架完成块的宽高透明度及颜色的渐变
了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...
- js运动框架 step by step
开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
- 完美的js运动框架
//完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...
随机推荐
- CSS3中哪些新属性—阴影、文本省略(1)
CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. ...
- linux ( CentOS 7)下Tengine(nginx)的安装与配置
TengineTengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.它的目的是打造一个高效.安全的Web平台. 使用root用户安装 ...
- 麦子lavarel---16、日志
麦子lavarel---16.日志 一.总结 一句话总结: 一定要养成打印日志查看日志的好习惯,非常节约时间和便于查错 1.console.Log(“获取类别数据:"):console.Lo ...
- QQ空间分享网址
现在大部分网站都在每个界面设计了分享这个功能,但还是有的网页没有(比如 B 站只能分享具体的视频).在原来的 QQ 空间分享的地方已经找不到法自己创建分享.上网一搜有分享的接口,可这个接口是给开发者用 ...
- 为什么从pycharm中打开的html文件会显示404?
问题如图: 解决办法: 某次发现运行导入的html文件的时候,打开浏览器会报404错误:而运行自己写的html文件则正常显示:最后发现这是pycharm缓存问题,只需重启pycharm清除缓存就ok啦 ...
- centos6.5下apollo1.7.1的搭建
前言:apollo MQ作为消息队列中间件,在需要消息列表的应用程序环境中,需要使用该服务器中间件 1.准备工作 2.搭建 3.测试 1.准备工作 第一步:linux系统中配置好java环境 A.卸载 ...
- jQuery基础--事件处理
2. jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极 ...
- [Linux] 012 文件搜索命令
文件搜索命令:find 命令名称:find 命令所在路径:/bin/find 执行权限:所有用户 语法:find [搜索范围] [匹配条件] 功能描述:文件搜索 范例: 在目录 /etc 中查找文件 ...
- redis 哨兵配置文件解读sentinel.conf
# Example sentinel.conf # port <sentinel-port>port 8001 # 守护进程模式daemonize yes # 指明日志文件名logfile ...
- Day6----Python的pyinstall库的使用
Python的pyinstaller库 pyinstaller的安装 介绍:pyinstaller是Python的第三方库,主要用于将Python代码打包成 可执行文件 ,以此达到就算没安装P ...