搜索:
首页 >> JavaScript >> Javascript特效 >> 三个动画函数,透明度渐变、位置移动、尺寸变化javascript源码

三个动画函数,透明度渐变、位置移动、尺寸变化javascript源码

2010-3-28 作者:abeet 来源:abeet博客 投递文章

先说明一下,现在网上有一些功能很强大的动画类,如MOOFX之类,我为什么要写这三个动画函数?

因为在写zDialog时需要且只需要用到透明度渐变动画,但又不愿意引入一个大大的动画类使zDialog变得臃肿,于是就写了一个透明度渐变动画的函数,前几天得空,把位置移动及尺寸变化这两种最常用的动画效果实现了

所以这三个函数适用于以下情况:

1、在做前端页面时,只需要简单的动画效果,不想引入整个动画类,使用本函数。

2、在写js类时,需要用到简单的动画,为了降低藕合性,使用本函数。

代码及运行效果,见下面的代码框

[提示:你可先修改部分代码,再按运行]

var fade = function(element, transparency, speed, callback){……}
透明度渐变:transparency:透明度 0(全透)-100(不透);speed:速度1-100,默认为1
例<input type="button" value="透明度变化" onClick="fade('testDiv', 40)" />


var move = function(element, position, speed, callback){……}
//移动到指定位置,position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340};speed:速度 1-100,默认为10
例<input type="button" value="垂直移动" onClick="move('testDiv', {top:400})" />

var resize = function(element, size, speed, callback){……}
//长宽渐变:size:要改变到的尺寸 格式 {width:400, height:250}或{width:400}或{height:250};speed:速度 1-100,默认为10
例<input type="button" value="改变高度" onClick="resize('testDiv', {height:300})" />

相关文章
手机版 Javascript特效 Asp之家 Aspxhome.com
闽ICP备06017341号