1. /*完美运动框架*/
  2. //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity
  3. function startMove(obj,json,fnEnd){
  4. clearInterval(obj.timer);
  5. obj.timer = setInterval(function(){
  6. var bStop = true;        //假设所有的属性都达到目标值
  7. for(attr in json){       //多值运动以json形式来表式
  8. var cur = 0;
  9. if(attr == "opacity"){    //透明度特殊处理
  10. cur=Math.round(parseFloat(getStyle(obj, attr))*100);
  11. }else{
  12. cur = parseInt(getStyle(obj,attr));
  13. }
  14.  
  15. var speed = (json[attr] - cur)/6;    //定义速度
  16. speed = speed > 0? Math.ceil(speed):Math.floor(speed);    //缓冲运动取整
  17.  
  18. if(cur != json[attr]){        //如果各值没有达到目标值,则继续运动
  19. bStop = false;
  20. }
  21. if(attr == "opacity"){        //透明度特殊处理
  22. obj.style.filter='alpha(opacity:'+(cur+speed)+')';
  23. obj.style.opacity=(cur+speed)/100;
  24. }else{
  25. obj.style[attr] = cur+speed + "px";
  26. }
  27. }
  28. if(bStop){
  29. clearInterval(obj.timer);      //如果各值达到目标值,则停止定时器
  30. if(fnEnd){               //回调函数,链式运动
  31. fnEnd();
  32. }
  33. }
  34. },Math.round(1000/60));
  35. }

2015.8.2js-19(完美运动框架)的更多相关文章

  1. 【repost】JavaScript完美运动框架的进阶之旅

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

  2. JavaScript “完美运动框架”

    /* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...

  3. JS完美运动框架

    这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...

  4. JS 之完美运动框架

    完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...

  5. 完美运动框架(js)

    一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...

  6. JS完美运动框架【利用了Json】

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  8. JS 之完美运动框架 如何同时改变元素多个属性?

    正如改变一个属性的方法,可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做, 调用两次运动函数,如同时改变宽和高,move(obj,'width',tar ...

  9. JavaScript 智能社 完美运动框架

    简约版: function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { r ...

随机推荐

  1. CodeFirst时使用T4模板

    我们都知道T4模板用于生成相似代码. 在DBFirst和ModelFirst条件下我们很容易从.edmx下获取所有实体类和其名称,并且通过我们定义的模板和某些遍历工作为我们生成所需要的相似代码. 但是 ...

  2. 【项目管理】Project使用

    http://www.cnblogs.com/wangfupeng1988/p/3647166.html

  3. maven添加本地jar到本地库中

    maven添加本地jar到本地库中(用于远端地址下载不了的情况) 在dos命令行执行以下命令将会吧ojdbc14-10.2.0.4.0.jar添加到本地库中(ps:必须已经安装了,maven,并配置了 ...

  4. 如何在IntelliJ IDEA中快速配置Tomcat

    近来使用idea编写java代码的人越来越多,最关键的就是idea强大的代码提示功能,能极高的提升程序员的开发效率,但是毕竟各有所长,idea中tomcat的配置就没有eclipse那么轻松,这里简单 ...

  5. ASP.NET MVC3控制器传递匿名对象到视图实例

    ASP.NET MVC3 + Entity Framework项目中,从控制器传递匿名对象到视图非常常见,原本以为用dynamic能轻松搞定,最后发现我错了: Controller:  代码如下 复制 ...

  6. Dubbo -- 系统学习 笔记 -- 示例 -- 泛化引用

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 泛化引用 泛接口调用方式主要用于客户端没有API接口及模型类元的情况,参数及返回值 ...

  7. JAVA WEB ------ 文件下载及导出数据到office Execl表格

    文件下载需要五步: 1.设置文件ContentType类型 // 设置文件ContentType类型,这样设置,会自动判断下载文件类型 response.setContentType("mu ...

  8. TCP三次握手原则

    “已失效的连接请求报文段”的产生在这样一种情况下: client发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连接释放以后的某个时间才到达server. 本来这是一 ...

  9. windows应急响应入侵排查思路

    0x00 前言 ​ 当企业发生黑客入侵.系统崩溃或其它影响业务正常运行的安全事件时,急需第一时间进行处理,使企业的网络信息系统在最短时间内恢复正常工作,进一步查找入侵来源,还原入侵事故过程,同时给出解 ...

  10. PHP代码执行函数总结

    PHP中可以执行代码的函数,常用于编写一句话木马,可能导致代码执行漏洞,这里对代码执行函数做一些归纳. 常见代码执行函数,如 eval().assert().preg_replace().create ...