简约版:

function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
} function startMove(obj, attr, iTarget, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var cur=0; if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
} var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget)
{
clearInterval(obj.timer); if(fnEnd)fnEnd();
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}, 30);
}

完整版:

function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
} //startMove(oDiv, {width: 400, height: 400}) function startMove(obj, json, fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //假设:所有值都已经到了 for(var attr in 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();
}
}, 30);
}

JavaScript 智能社 完美运动框架的更多相关文章

  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)

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

  5. JS 之完美运动框架

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

  6. 2015.8.2js-19(完美运动框架)

    /*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...

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

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

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

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

  9. JavaScript 基础入门11 - 运动框架的封装

    目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...

随机推荐

  1. Linux shell脚本编程(二)

    Linux shell脚本编程(二) 练习:求100以内所有偶数之和; 使用至少三种方法实现; 示例1: #!/bin/bash # declare -i sum=0 #声明一个变量求和,初始值为0 ...

  2. nginx 虚拟主机基于端口的搭建

    首先配置nginx.conf [root@localhost conf]# cat nginx.confworker_processes 1;user nginx nginx;error_log /a ...

  3. 【只需3步】Linux php的安装与配置[源码安装]

    作者小波/QQ463431476欢迎转载! Linux:redhat 6/centos 6 继续上一篇笔记Apache的配置http://www.cnblogs.com/xiaobo-Linux/p/ ...

  4. 大数据慎行,数据管理要落实到KPI

    近年来,"大数据"一词被IT和互联网行业广泛提及,但真正落到实处的案例没有多少,大数据量支撑.数据挖掘技术.非结构化数据是阻碍的主要原因.大多数企业的信息化并没有达到到成熟水平,关 ...

  5. PHP代码

    1 <html>  <head>       <meta http-equiv="content-type" content="text/h ...

  6. Lis日常维护

    1.[问题]护士站打印LIs条码,出来是PDF格式的 [解决]在文件夹Client\NeusoftLis\Xml\Print.xml中把BarcodePrint Name的值改成安装的斑马打印机名(不 ...

  7. Linux下的C Socket编程 -- 简介与client端的处理

    Linux下的C Socket编程(一) 介绍 Socket是进程间通信的方式之一,是进程间的通信.这里说的进程并不一定是在同一台机器上也有可能是通过网络连接的不同机器上.只要他们之间建立起了sock ...

  8. [LeetCode] Minimum Moves to Equal Array Elements 最少移动次数使数组元素相等

    Given a non-empty integer array of size n, find the minimum number of moves required to make all arr ...

  9. [LeetCode] Merge k Sorted Lists 合并k个有序链表

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 这 ...

  10. navicat注册码

    1. navicat for mysql 9 注册码   :::   NAVL-EHNC-7N7P-W6GM  2. navicat for mysql 9.17中文版 注册码 :: NAVM-5ZC ...