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

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. JAVA中的数字运算+号与字符串+号

    (1)当“+”两边是非数值类型,“+”就被看作连接符. (2)当“+”两边都是数值类型,“+”就被看作算术运算中的加号. (3)当“+”一边是非数值,一边是数值类型,“+”就被看作连接符.

  2. extJS 中 ext.data 介绍

    ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,负责显示数据. Ext.data在命名空间中定义了一系列store.reader和pro ...

  3. 运动规划 (Motion Planning): MoveIt! 与 OMPL---44

    原创博文:转载请标明出处:http://www.cnblogs.com/zxouxuewei 最近有不少人询问有关MoveIt!与OMPL相关的话题,但是大部分问题都集中于XXX功能怎么实现,XXX错 ...

  4. 【Oracle】两个表Join关联更新

    两个表关联,用B表的字段更新A表的字段. UPDATE ( SELECT A.COL1 A_COL, B.COL2 B_COL FROM table1 A INNER JOIN table2 B ON ...

  5. 恶劣条件下的apache配置(Linux)

    (本文出自yangjj ^_^)   前提:1.没联网,yum挂.2.至少要有GCC,要不玩个屁. 3.你有充足的咖啡并且有几个小时时间不想打dota. 4.你要做集群. 以上条件不满足其一,看到这里 ...

  6. java.lang.Class<T> -- 反射机制及动态代理

    Interface : Person package java_.lang_.component.bean; public interface Person { String area = " ...

  7. elastic search 概念

    1. index 与 type index 相当于 mysql 的 database, type 相当于 table 2. mapping mapping 相当于 mysql table 的列属性声明 ...

  8. HDOJ 4276 The Ghost Blows Light(树形DP)

    Problem Description My name is Hu Bayi, robing an ancient tomb in Tibet. The tomb consists of N room ...

  9. Windows最全快捷键

    单独按Windows:显示或隐藏“开始”功能表 Windows+BREAK:显示“系统属性” 对话框 Windows+D:显示桌面 Windows+M:最小化所有窗口 Windows+Shift+M: ...

  10. iOS开发-修改UITableViewCell中image和title的位置和大小

    最近在开发中遇到需要Cell中imageView和textLable位置和大小的情况,设计希望得到的结果如下图所示: 而TableViewCell默认样式,image是靠紧左边的,并且image和ti ...