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. 50个jQuery代码段帮你成为更好的JavaScript开发者

    1. 如何创建嵌套的过滤器: 允许你减少集合中的匹配元素的过滤器,只剩下那些与给定的选择器匹配的部分.在这种情况下,查询删除了任何没(:not)有(:has)包含class为“selected”(.s ...

  2. javascript权威指南学习笔记3

    今天看到第四章,记录一下其中的几个点,俗话说:好记性不如烂笔头嘛. 4.9   in运算符和instanceof运算符 in运算符希望它的左操作数是一个字符串或可以转化为字符串,希望它的右操作数是一个 ...

  3. Python的多线程实现

    概述 Python虚拟机使用GIL(Global Interpreter Lock,全局解释器锁)来实现互斥线程对共享资源的访问,暂时无法利用多处理器的优势. Python中,thread和threa ...

  4. Python爬虫预备知识

    1.http编程知识 http中client 和server的工作模式 client和server建立可靠的tcp链接(在HTTP1.1中这个链接是长时间的,超时断开策略) client通过socke ...

  5. 添加、设置tabBarItem属性

    //tabbarItem正常状态的属性 NSMutableDictionary *nor = [NSMutableDictionary dictionary]; nor[NSForegroundCol ...

  6. System.Web.Http.Tracing 在webapi里面应用

    最近想写log.再接口里面 所以就想到了.net 4.0提供的这个类. 整好.配合asp.net api好使用 ,而且 本地调试会在 vs Output 里面输出. 1.开启这个Tracing con ...

  7. 解决mongodb ISODate相差8小时问题

    服务端使用mongoose操作mongodb,其中Schema中的日期字段定义如下: date: {type:Date, default:Date.now},//操作日期 插入到mongodb中adt ...

  8. js blog

    http://www.csdn.net/article/2013-12-16/2817820-javascript-survey-results 近日DailyJS社区发起了一项针对JavaScrip ...

  9. 调用API函数,在窗口非客户区绘图(通过GetWindowDC获得整个窗口的DC,就可以随意作画了)

    http://hi.baidu.com/3582077/item/77d3c1ff60f9fa5ec9f33754 调用API函数,在窗口非客户区绘图 GDI+的Graphics类里有个FromHdc ...

  10. js 数字添加逗号,格式化数字

    function addCommas(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + ...