function startMove(obj,json,fnEnd)
{
clearInterval(obj.timer);//清除定时器
obj.timer=setInterval(function(){
var bStop=true; //定义全部完成标志
for(var attr in json)
{
var curr='';
if(attr=='opacity') //运动如果是透明度
{
curr=Math.round(parseFloat(_css(obj,'opacity'))*100);
}
else //其他运动情况
{
curr =parseInt(_css(obj,attr));
} //计算速度 基数为6,基数越大,速度越慢
var speed =(json[attr]-curr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed); //速度:大于0的向上去整,小于0的向下取整
if(curr!=json[attr])//有一项运动没有完成就为false
{
bStop=false;
}
if(attr=='opacity') //运动如果是透明
{
obj.style.filter='alpha(opacity:'+(curr+speed)+')';
obj.style.opacity=(curr+speed)/100;
}
else
{
obj.style[attr]=curr+speed+'px';
}
} if(bStop)
{
clearInterval(obj.timer);
if(fnEnd) //如果有callback函数
{
fnEnd();
}
}
},30);
}

javascript:运动框架的更多相关文章

  1. javascript运动框架(三)

    迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关 ...

  2. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  3. 【repost】JavaScript运动框架之速度时间版本

    一.JavaScript运动框架之速度版 1.1 运动框架的实现思路 运动,其实就是在一段时间内改变 left . right . width . height . opactiy 的值,到达目的地之 ...

  4. 【原生JS组件】javascript 运动框架

    大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...

  5. javascript运动框架

    下面这个一个运动框架可以控制元素在一个属性上的运动,同时,可以调用回调函数. /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 */ function getStyle(obj, a ...

  6. JavaScript 运动框架 Step by step(转)

    1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样 ...

  7. javaScript运动框架之匀速运动

    运动框架 1.在开始运动时,关闭已有定时器 2.把运动和停止隔开(if/else) 匀速运动的停止条件 运动终止条件:距离足够近 Demo代码 <!DOCTYPE html> <ht ...

  8. JavaScript 运动框架

    <script> window.onload=function (){ var oDiv=document.getElementById("div1"); oDiv.o ...

  9. javascript运动框架(二)

    紧接着上面写的... 给div加一个边框,border:1px solid black window.onload = function(){      var div = document.getE ...

  10. 适用于CSS2的各种运动的javascript运动框架

    <script> window.onload = function() { //var oDiv1 = document.getElementById('box1'); //var oDi ...

随机推荐

  1. Windows Phone获得IsolatedStorage中指定目录下的所有文件

    在Windows Phone 中对隔离存储空间中的文件操作需要通过System.Io.IsolatedStorage下的类进行操作 获得指定文件夹下的所有文件: 参数:是指定文件夹的路径加上通配符,格 ...

  2. Tag标签系统设计

    转一篇关于tag的文章:  <Tagging: People-powered Metadata for the Social Web>出版于2008年,中文版译为<标签:标记系统设计 ...

  3. java签名证书

    import java.io.FileInputStream; import java.security.KeyStore; import java.security.PrivateKey; impo ...

  4. POJ3009 Curling 2.0(DFS)

    题目链接. 分析: 本题BFS A不了. 00100 00001 01020 00000 00010 00010 00010 00010 00030 对于这样的数据,本来应当是 5 步,但bfs却 4 ...

  5. 设计模式(六):Singleton 单件模式 -- 创建型模式

    1.定义 当需要控制一个类的实例数量且调用者可以从一个公共的访问点访问时. 2.适用场景 1. 当类只能有一个实例而且客户可以从一个众所周知的访问点访问它时. 2. 当这个唯一实例应该是通过子类化可扩 ...

  6. LBS 与 GPS 定位之间的区别

    什么是LBS定位?   LBS英文全称为Location Based Services, 它包括两层含义:首先是确定移动设备或用户所在的地理位置:其次是提供与位置相关的各类信息服务.意指与定位相关的各 ...

  7. Linux网卡驱动架构分析

    一.网卡驱动架构 由上到下层次依次为:应用程序→系统调用接口→协议无关接口→网络协议栈→设备无关接口→设备驱动. 二.重要数据结构 1.Linux内核中每一个网卡由一个net_device结构来描述. ...

  8. 使用 Maven 部署 artifact 到 Nexus 教程

    本文侧重讲解如何将已经按照好的 Maven 和 Nexus 连接,即如何通过 Maven 部署 artifact 到 Nexus. 本文前提: 1. 安装好 Maven.可以使用 Maven 创建.打 ...

  9. M - Escape - HDU 3605 - (缩点+最大流SAP)

    题目大意:2012世界末日来了,科学家发现了一些星球可以转移人口,不过有的人可以在一些星球上生存有的人不行,而且每个星球都有一定的承载量,现在想知道是否所有的人都可以安全转移呢? 输入:首先输入一个N ...

  10. label标签的属性

    //label标签的属性 - (void)viewDidLoad { //初始化一个label1标签对象,初始化有很多方法,最原始的就是init,此处用带有frame的方法 UILabel *labe ...