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. chromedriver 与 chrome关联关系

    ----------ChromeDriver v2.22 (2016-06-06)---------- Supports Chrome v49-52 Resolved issue 1348: Time ...

  2. 中文版kendoUI API — Grid(一)

    1.altRowTemplate 类型:Function | String 说明:提供表格行的交替模板,默认grid表格为每一个数据元素提供一个tr 注意:模板中最外层的html元素必须是<tr ...

  3. [xfire]使用xfire开发webservice的简单示例

    目前项目上有用到xfire,所以临时看了些xfire的资料和示例,自己照着写了一个简单示例. xfire在2007年后已经停止更新,正式更名为apache cxf,也可以说是xfire2.0. xfi ...

  4. 移动H5前端性能优化指南[托尼托尼研究所]

    概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2. ...

  5. Python 可变对象和不可变对象

    具体可以看这里:http://thomaschen2011.iteye.com/blog/1441254 不可变对象:int,string,float,tuple 可变对象   :list,dicti ...

  6. 转:视觉中国的NoSQL之路:从MySQL到MongoDB

    起因 视觉中国网站(www.chinavisual.com)是国内最大的创意人群的专业网站.2009年以前,同很多公司一样,我们的CMS和社区产品都构建于PHP+Nginx+MySQL之上:MySQL ...

  7. 深入研究 Win32 结构化异常处理(好多相关文章)

    摘要 就像人们常说的那样,Win32 结构化异常处理(SEH)是一个操作系统提供的服务.你能找到的所有关于 SEH 的文档讲的都是针对某个特定编译器的.建立在操作系统层之上的封装库.我将从 SEH 的 ...

  8. 那些SQL语句

    根据book_id,class_id确定老师uid select user_id from lessons left join book on lessons.lesson_id = book.les ...

  9. BZOJ1264: [AHOI2006]基因匹配Match

    1264: [AHOI2006]基因匹配Match Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 541  Solved: 347[Submit][S ...

  10. -_-#【Better JS Code】插入迭代值

    +function() { var i = 0 var values = ['xiaoming', 'xiaohong'] var name = values[i] i++ console.log(n ...