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. 转型函数 Boolean()

    布尔值有2种可能的值true和false;但 ECMAScript中所有类型的值都有与这两个 Boolean 值 等价的值.要将一个值转换为其对应的 Boolean 值,可以调用转型函数 Boolea ...

  2. grails-MappingException: Could not determine Type

    在用grails的时候遇到这个问题,反复调试了很久,没有进展,同时敲了几个命令后好了,真纠结,这是框架的问题吗? 问题: Caused by MappingException: Could not d ...

  3. ASP.NET WEB API 2 框架揭秘 读书笔记(一)

    第一章 概述 主要内容是介绍Web的基本概念,Restfull的基本概念及特性.最后介绍创建简单WebApi程序的步骤. Web的基本概念 IP/TCP协议簇分层,分为两种 链路层->网络层-& ...

  4. Rotate List 面试题

    今天做了leetcode的Rotate List,刚开始头脑不清楚,写的乱七八糟的,后来改了下,提交了,能过,把代码贴出来. 做题的时候头脑要清楚,我刚开始做完的时候才发现我把向左向右移动弄反了,后来 ...

  5. WinPcap编程(二)

    0. 这一次具体讲抓包的两种方法. (建议)清除ARP表,最好自己写个批处理命令.快一点. 1.0 抓包步骤 步骤很简单:先打开适配器列表 --> 选择适配器 --> 通过遍历链表的方式到 ...

  6. dict两种遍历方法

    采用for...in...遍历: >>> for i in dd: ... print("%s:%s"%(i,dd[i])) ... :chen :hang :w ...

  7. Lucene查询条数限制

    运用Lucene进行索引,在查询的时候是有条数限制的 public virtual TopFieldDocs Search(Query query, Filter filter, int n, Sor ...

  8. Yii2——MYSQL操作

    先创建连接对象 $connection = new \yii\db\Connection([ 'dsn' => $dsn, 'username' => $username, 'passwo ...

  9. Android 判断当前网络连接类型

    实际应用开发时,如果存在需要用户获取大量数据的情况,最好是先判断下网络类型,提示用户当前的网络类型,是否需要连接Wifi,etc.(手机流量太贵啦,当然土豪是无视这玩意的, (/ □ \)). 定义网 ...

  10. U盘安装CentOS7

    1:U盘启动,进入安装界面,点击Tab键,修改最后一行如下: ...=initrd.img linux dd quiet 查看centos系统盘符,例如:sdb4 2:重启电脑,进入安装界面,点击Ta ...