//完美运动框架, 对象,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运动框架的更多相关文章

  1. 带无缝滚动的轮播图(含JS运动框架)

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  3. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  4. js 运动框架及实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js运动框架之掉落的扑克牌(重心、弹起效果)

    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...

  6. js运动框架完成块的宽高透明度及颜色的渐变

    了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...

  7. js运动框架 step by step

    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...

  8. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  9. js 运动框架-轻量级

    具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...

随机推荐

  1. 正确理解python的装饰器

    一直在用别人写的装饰器,从来没有对其原理进行深入的探究.今天趁有点闲着的时间,把装饰器的原理好好看了一遍,做一下整理. 一.装饰器的基本原理 装饰器就是一个可以接受调用也可以返回调用的调用.装饰器本身 ...

  2. javascript 实现斐波那契数列的不同姿势

    快过年了,公司人基本上都走光了,只有共和国最优秀的人才,各部门最重要的岗位才会坚守在各自的转椅上,毕竟每个人的能力有限,与其让他们继续工作,不如放他们回家过年.这觉悟很高,这领悟很痛~    闲着没事 ...

  3. vue2.0开发时导入组件时出错

    导入自定义组件时出现了如下错误 ERROR Failed to compile with 1 errors 12:35:41 This dependency was not found: * comp ...

  4. IO&&Serize 利用线程Thread.Sleep实现"自动输出"

    查看链接 https://github.com/jungle8884/C-.Net/tree/MyClassLibrary using System; using System.Collections ...

  5. Xcode的SVN提示"The request timed out."的解决方案

    问题描述 在利用Xcode的SourceControl进行SVN代码检出时,确认输入地址.帐号密码都正确的情况下,总是提示"The request timed out.".该问题的 ...

  6. 一、scrapy的下载安装---Windows(安装软件太让我伤心了)

    写博客就和笔记一样真的很有用,你可以随时的翻阅.爬虫的爬虫原理与数据抓取.非结构化与结构化数据提取.动态HTML处理和简单的图像识别已经学完,就差整理博客了 开始学习scrapy了,所以重新建了个分类 ...

  7. css去除ios文本框默认圆角

    css去除ios文本框默认圆角 input, textarea {-webkit-appearance: none;}

  8. Linux命令之tar-rsync

    一.tar命令 可以对文件和目录进行打包压缩(相较于zip.gzip.bzip2不能对目录进行压缩,tar是一大优势) 用途:制作归档文件.释放归档文件 基本格式: 压缩---> tar  [选 ...

  9. 速卖通AE平台+聚石塔+奇门 完整教程V2

    公司是跨境电商,在阿里马马的速卖通平台上开有店铺,并且基于速卖通开放平台,自主研发了ERP系统,居今已有3年多的时间了,一直很稳定. 今年初,速卖通AE开放平台改版,并入淘宝开放平台中,我们的麻烦就开 ...

  10. js在工作中遇到的一些问题

    前言 js这种语言没有太多封装好的模式或者统一的编程方式,所以一些细节的问题很容易导致bug,那下面就写为:一份坚固的代码是什么样的. 持续更新一下,记一些good case和bug. 事件绑定的选择 ...