完美的js运动框架
//完美运动框架, 对象,json,函数
function move(obj,json,funEnd){
clearInterval(obj.timer);//清除定时器
obj.timer= setInterval(function(){//同时开好几个对象定时器
//声明一个变量,看下JSON中的属性点是已经达到==目标点是都已经完成
var flag=true;//设置一个初始值假设全部的属性都已经执行了完了
for(var attr in json){//使用for 循环,引出json中的各个目标点
var currentAttr=0;//声明一个变量,主要存储原始点
if(attr=="opacity"){//如果 属性==opacity,要另行考虑
//为了确保得到的数字是整数,所以使用Math.round,后面是转义,*100是因为opacity的值为小数
currentAttr=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else {
currentAttr=parseInt(getStyle(obj,attr)); //正常情况下的转义并赋值
}
var speed=(json[attr]-currentAttr)/10; //声明变量,获取速度 速度=(目标点-原始点)/number
speed=speed>0?Math.ceil(speed):Math.floor(speed); //进行速度的取整 Math.ceil 向上取整 Math.floor 向下取整
if(json[attr]!=currentAttr)//如果 原始点!=目标点 ,不停止运动
{
flag=false;
}
// if(json[attr]==currentAttr){
// clearInterval(obj.timer);
// if(funEnd)funEnd();
// // if(funEnd){
// // funEnd();
// // }
// }
// else {
if(attr=="opacity"){//如果 目标点==opacity
// currentAttr+=speed;
obj.style.opacity=(currentAttr+speed)/100; //使用下面的代码求出 opacity
obj.style.filter='alpha(opacity:'+(currentAttr+speed)+')';
}
else {//使用下面的代码求出 [attr]也就是目标点的属性!
obj.style[attr]=currentAttr+speed+"px";
}
// }
} //当所有的运动都完成后,关闭定时器,若有函数,执行函数!
if(flag){//全部的属性已经执行
clearInterval(obj.timer);
if(funEnd)funEnd();
}
},30)
}
//获取非行间的属性,下面主要是为了兼容各个浏览器
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else {
return getComputedStyle(obj,false)[name];
}
}
function getClass(oParent,className){
var ele=oParent.getElementsByTagName("*");
var arr=[];
for(var i=0;i<ele.length;i++){
if(ele[i].className==className){
arr.push(ele[i]);
}
}
return arr;
}
完美的js运动框架的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- js 运动框架及实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js运动框架之掉落的扑克牌(重心、弹起效果)
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
- js运动框架完成块的宽高透明度及颜色的渐变
了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...
- js运动框架 step by step
开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
- js 运动框架-轻量级
具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...
随机推荐
- dubbo中Listener的实现
这里继续dubbo的源码旅程,在过程中学习它的设计和技巧,看优秀的代码,我想对我们日程编码必然有帮助的.而那些开源的代码正是千锤百炼的东西,希望和各位共勉. 拿ProtocolListenerWrap ...
- 洛谷 [p2294] [HNOI2005] 狡猾的商人
差分约束做法 又是一道转换成前缀和的差分约束题,已知从s月到t月的收入w,设数组pre[i]代表从开始到第i个月的总收入 构造差分不等式 $ pre[s-1]-pre[t]==w $ 为了满足松弛操作 ...
- Kolakoski序列产生器
/* 本程序说明: Kolakoski序列是一个仅由1和2组成的无限数列,是一种通过“自描述”来定义的数列. 他的前几项为1,2,2,1,1,2,1,2,2,1,2,2,1,1,2,1,1,2,2,1 ...
- 监督学习:随机梯度下降算法(sgd)和批梯度下降算法(bgd)
线性回归 首先要明白什么是回归.回归的目的是通过几个已知数据来预测另一个数值型数据的目标值. 假设特征和结果满足线性关系,即满足一个计算公式h(x),这个公式的自变量就是已知的数据x,函数值h(x)就 ...
- socketlog的安装和使用
socketlog的使用范围 socketlog比较适用于ajax调试和api的调试,经典应用莫不过于微信众多的api使用调试,使用socketlog可以很条理清楚的查看到api传递的参数,加载的性 ...
- memcached安装与使用详解
一.memcache的简介 memcache是高速,分布式的内存缓存服务器 php的缓存方式一般可以使用memcache技术和redis技术,其中各有优劣,因不同的情况而选择较为适合的缓存技术,其中m ...
- JavaScript使用点滴
JavaScript使用点滴 一.字符串替换的小插曲 遇到一个小插曲,想要把后台返回的字符串输出给前端视图,字符串中包含\n换行,需要使用javascript对其进行替换成<br />. ...
- 描述进程的PCB
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- nodejs和npm的安装
下载nodejs的压缩包 网址:https://nodejs.org/en/ 下载以tar.xz结尾的包例如:node-v8.9.4-linux-x64.tar.xz 上传包到制定的目录 可以用lrz ...
- CentOS 设置网络(修改IP&修改网关&修改DNS)
CentOS修改IP地址 # ifconfig eth0 192.168.1.80 这样就把IP地址修改为192.168.1.80(如果发现上不了网了,那么你可能需要把网关和DNS也改一下,后面会提到 ...