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 ...
随机推荐
- [CSP-S模拟测试]:Dinner(二分)
题目描述 清儿今天请好朋友们吃饭,一共$N$个人坐在坐在圆桌旁.吃饭的第一步当然是点餐了.服务员拿来了$M$份菜单.第$i$个人阅读菜单并点出自己喜欢的菜需要花费时间$T_i$.当一个人点完菜之后,就 ...
- /usr/bin/ld: cannot find -lgcc_s 问题解决小记
/usr/bin/ld: cannot find -lgcc_s 问题解决小记 博客分类: Linux/Ubuntu 由于之前用wubi装的ubuntu并且只给了它10G的硬盘空间,随着学习的深入这种 ...
- php红包功能
最近公司要开发 广告红包功能,这是写好的代码先放到这 https://files.cnblogs.com/files/jxkshu/PHP%E5%B9%BF%E5%91%8A%E7%BA%A2%E5% ...
- loj#500 「LibreOJ β Round」ZQC 的拼图
分析 二分倍数 然后考虑dp[i][j]表示选到第i个x轴覆盖到j的情况y轴最多覆盖多少 贡献柿子可以画图然后相似三角形得到 代码 #include<bits/stdc++.h> usin ...
- yum python mysql
lrwxrwxrwx root root Jun : pyspark -> /etc/alternatives/pyspark lrwxrwxrwx root root Jul : python ...
- DOS 查看端口占用,Kill线程
查看端口占用 C:\Users\1>netstat -aon|findstr "8020" TCP 0.0.0.0:8020 0.0.0.0:0 LISTENING 1468 ...
- Linux 内核剖析
https://www.ibm.com/developerworks/cn/linux/l-linux-kernel/ 由于本文的目标是对 Linux 内核进行介绍并探索其体系结构和主要组件,因此首先 ...
- 使EasyUI的window、panel、dialog 不被拖出页面
function easyuiPanelOnMove(left, top) { var l = left; var t = top; if (l < 1) { l = 1; } ...
- Vue-实现简单拖拽(自定义属性)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 前端最常用的跨域方式--jsonp
jsonp通过动态创建script标签的方式来实现跨域通信.原理是浏览器允许html标签在不同的域名下加载资源. <script> var script = document.create ...