在进行Javascript开发，有时会有一些动画效果的实现需要，这往往浪费了开发人员不必要的精力。而Ext开发小组则提供了Fx类集中处理了大部分常用的js动画特效，减少了我们自己手写代码的复杂度。
// 图片宽 var WIDTH = 300 ; // 图片高 var HEIGHT = 262 ; function reset() ... { // 以Ext获得指定元素，并指定此元素左边距、上方边距、右边距、下方边距 Ext.get( ' target ' ).highlight().setBounds( 10 , 10 ,WIDTH + 10 ,HEIGHT + 10 ); function act() ... { // 刷新 reset(); // 在指定时间内移动到指定位置 Ext.get( ' target ' ).setBounds( 150 , 80 ,WIDTH + 150 ,WIDTH + 80 , ... {duration: 1.0 } ); /**/ /* * */ function Anime() ... { ' target ' ).highlight().fadeOut().fadeIn().pause( 2 ).switchOff().puff(); // IE下不支持switchOn()方法，这是一个Ext的bug } /**/ /* * */ function fadeout() ... { // 设定最后不透明度为0.0(完全透明),持续时间为1.0，方式为easeNone Ext.get( ' target ' ).setOpacity( 0.0 , ... {duration: 1.0 ,easing: ' easeNone ' } ); /**/ /* * */ function fadein() ... { ' target ' ).setOpacity( 1.0 , ... {duration: 1.0 ,easing: ' easeNone ' } ); function act2() ... { var easingMethod = document.getElementById( ' easing ' ).value; ' target ' ).setLocation( 150 , 150 , ... { 1.0 , );
< html > < head > < meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" > < title > CartoonExt </ title > <!-- 加载ExtJs资源 --> < script type ="text/javascript" src ="adapter/ext/ext-base.js" > ... </ script > < script type ="text/javascript" src ="ext-all.js" > ... </ script > <!-- 我的js --> < script type ="text/javascript" src ="CartoonExt.js" > ... </ script > </ head > < body > < div style ="width:300px;height:450px;" > <!-- 被移动的元素 --> < img id ="target" src ="sprite1.jpg" > </ div > < div style ="text-align:center;" > < input type ="button" value ="刷新" onclick ="reset();" > < input type ="button" value ="逐渐放大" onclick ="act();" > < input type ="button" value ="淡出" onclick ="fadeout();" > < input type ="button" value ="淡入" onclick ="fadein();" > < input type ="button" value ="连续动画" onclick ="Anime();" > < BR > < BR > < select id ="easing" > < option value ="easeNone" > easeNone </ option > < option value ="easeIn" > easeIn </ option > < option value ="easeOut" > easeOut </ option > < option value ="easeBoth" > easeBoth </ option > < option value ="easeInStrong" > easeInStrong </ option > < option value ="easeOutStrong" > easeOutStrong </ option > < option value ="easeBothStrong" > easeBothStrong </ option > < option value ="elasticIn" > elasticIn </ option > < option value ="elasticOut" > elasticOut </ option > < option value ="elasticBoth" > elasticBoth </ option > < option value ="backIn" > backIn </ option > < option value ="backOut" > backOut </ option > < option value ="backBoth" > backBoth </ option > < option value ="bounceIn" > bounceIn </ option > < option value ="bounceOut" > bounceOut </ option > < option value ="bounceBoth" > bounceBoth </ option > </ select > < input type ="button" value ="执行" onclick ="act2();" > </ div > </ body > </ html >
fadeIn( [Object options] ) : Ext.Element 渐显 options参数有以下属性 callback:Function 完成后的回叫方法fadeOut( [Object options] ) : Ext.Element 渐隐 frame( [String color], [Number count], [Object options] ) : Ext.Element 边框变亮扩展然后渐隐 ghost( [String anchor], [Object options] ) : Ext.Element 渐渐滑出视图,anchor定义 hasActiveFx() : Boolean 指示元素是否当前有特效正在活动 hasFxBlock() : Boolean 是否有特效阻塞了 highlight( [String color], [Object options] ) : Ext.Element 高亮显示当前元素 pause( Number seconds ) : Ext.Element 暂停 puff( [Object options] ) : Ext.Element 元素渐大并隐没 scale( Number width, Number height, [Object options] ) : Ext.Element 缩放 sequenceFx() 特效序列 shift( Object options ) : Ext.Element 位移,并可重置大小,透明度等 slideIn( [String anchor], [Object options] ) : Ext.Element 淡入 slideOut( [String anchor], [Object options] ) : Ext.Element 淡出 stopFx() : Ext.Element 停止特效switchOff( [Object options] ) : Ext.Element 收起并隐没 syncFx() : Ext.Element 异步特效
相关文章：
2021-08-05
2021-11-05
2021-10-07
2021-12-23
2021-10-21
2021-06-10
2021-08-07
猜你喜欢
2021-08-19
2021-12-13
2021-12-27
2021-12-10
2021-04-16
2021-08-06
相关资源
下载
2023-01-31
下载
2021-06-24
下载
2021-06-06