简约版:

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. CentOS系统yum源使用报错:Error: Cannot retrieve repository metadata (repomd.xml) for repository: rpmforge.

    服务器上的yum突然不好使用,使用yum的时候报错如下:[root@bastion-IDC src]# yum list......Could not retrieve mirrorlist http ...

  2. 我的操作系统复习——I/O控制和系统调用

    上篇博客介绍了存储器管理的相关知识——我的操作系统复习——存储器管理,本篇讲设备管理中的I/O控制方式和操作系统中的系统调用. 一.I/O控制方式 I/O就是输入输出,I/O设备指的是输入输出设备和存 ...

  3. [LeetCode] Longest Repeating Character Replacement 最长重复字符置换

    Given a string that consists of only uppercase English letters, you can replace any letter in the st ...

  4. [LeetCode] Longest Consecutive Sequence 求最长连续序列

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  5. [LeetCode] Remove Duplicates from Sorted Array II 有序数组中去除重复项之二

    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...

  6. 【原】Learning Spark (Python版) 学习笔记(三)----工作原理、调优与Spark SQL

    周末的任务是更新Learning Spark系列第三篇,以为自己写不完了,但为了改正拖延症,还是得完成给自己定的任务啊 = =.这三章主要讲Spark的运行过程(本地+集群),性能调优以及Spark ...

  7. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  8. QR code 扩展生成二维码

    include './phpqrcode/phpqrcode.php';  //引入QR库 QRcode::png("leo", 'qrcode.png', 'L', 10);  ...

  9. Java_jvisualvm使用JMX连接远程机器(实践)

    https://my.oschina.net/heroShane/blog/196227 一.启动普通的jar程序 1.执行foo.jar启动命令 java -Dcom.sun.management. ...

  10. 推公式hdu2298

    (0,0)点到(x,y)以v射箭 问 最小的角度 不能射到 -1 x=v*cos(a)*t; y=v*sin(a)*t-0.5*g*t*t; 消去t; y=x*tan(a)-0.5*g*x*x/(v* ...