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 ...
随机推荐
- ProxyImpl 类
package com.test.mvp.mvpdemo.mvp.v7.proxy; import com.test.mvp.mvpdemo.mvp.v7.basemvp.BasePresenter; ...
- Linux shell - scp命令用法
例子: 远程复制一个文件从服务器A (172.0.0.0) /home/test/file1.txt 到 服务器B (172.0.0.1) /home/test 服务器A和服务器B的用户是 test ...
- C#-概念-类:类
ylbtech-C#-概念-类:类 类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础.类是一种用户定义类型,也称类类型.每个类包含 ...
- jmeter之登录接口的一次简单压测与分析
前言:登录接口的一次简单压测与分析 1.接口文档 2.配置元件 3.结果分析 1.接口文档 a.拿到接口文档 接口地址:http://localhost:8080/jpress/admin/login ...
- Caffe深入分析(源码)
Caffe的整体流程图: 程序入口:main() int main(int argc, char** argv) { ..... ]))(); .... } g_brew_map实现过程,首先通过 t ...
- hdu6575Budget
Problem Description Avin’s company has many ongoing projects with different budgets. His company rec ...
- 使用Logistic Regression Algorithm进行多分类数字识别的Octave仿真
所需解决的问题是,训练一个Logistic Regression系统,使之能够识别手写体数字1-10,每张图片为20px*20px的灰度图.训练样例的输入X是5000行400列的一个矩阵,每一行存储一 ...
- mysql内存数据淘汰机制和大查询会不会把内存打爆?
首先我们说一下大查询会不会把内存打爆? 比如说主机内存有5g,但是我们一个大查询的数据有10g,这样会不会把内存打爆呢? 答案:不会 为什么? 因为mysql读取数据是采取边读边发的策略 select ...
- 洛谷 P1025 & [NOIP2001提高组] 数的划分(搜索剪枝)
题目链接 https://www.luogu.org/problemnew/show/P1025 解题思路 一道简单的dfs题,但是需要剪枝,否则会TLE. 我们用dfs(a,u,num)来表示上一个 ...
- [NOIP2016]借教室
NOIP2012提高组D2T2. 这道题目非常基础,正解貌似是二分+差分数组,在这里提供一种线段树的思路. 很容易发现题目让我们每次修改一段区间,然后我们只需要看每一个区间内有没有负数就可以了.可以用 ...