ExtJS简单的动画效果2(ext js淡入淡出特效)
2013-07-23 18:00
253 查看
Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度。
面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果:
(注意导入js和css文件的目录,图片自己设置)
CartoonExt.js
----------------------------------------------------------------------------------------------------------------
CartoonExt.html
----------------------------------------------------------------------------------------------------------------
部分参数如下:
参考:http://blog.sina.com.cn/s/blog_74684ec501015lhq.html
面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果:
(注意导入js和css文件的目录,图片自己设置)
CartoonExt.js
var WIDTH = 300; // 图片宽 var HEIGHT = 300; // 图片高 function reset() { // 以 Ext 获得指定元素,并指定此元素左边距、上方边距、右边距、下方边距 Ext. get ( 'picture' ).highlight().setBounds(10, 10, WIDTH + 10, HEIGHT + 10); } function enlarge() { reset(); // 在指定时间内移动到指定位置 Ext. get ( 'picture' ).setBounds(150, 80, WIDTH + 50, WIDTH + 80, { // 指定的位置 duration : 1.0 //duration:Number 事件完成时间(以秒为单位) }); } function play() { Ext. get ( 'picture' ).highlight().fadeOut().fadeIn().pause(2).switchOff().puff(); // IE 下不支持 switchOn() 方法,这是一个 Ext 的 bug } function fadeout() { // 设定最后不透明度为 0.0( 完全透明 ), 持续时间为 1.0 ,方式为 easeNone Ext. get ( 'picture' ).setOpacity (0.0, { duration : 1.0, easing : 'easeNone' //easing:String 行为方法 默认值是 :easeOut }); } function fadein() { Ext. get ( 'picture' ).setOpacity (1.0, { duration : 1.0, easing : 'easeNone' }); } function execution() { reset(); var easingMethod = document.getElementByIdx_x( 'easing' ).value; Ext. get ( 'picture' ).setLocation(150, 150, { duration : 1.0, easing : easingMethod }); }
----------------------------------------------------------------------------------------------------------------
CartoonExt.html
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > < title > CartoonExt </ title > < script type = "text/javascript" src = "../js/ext-base.js" ></ script > < script type = "text/javascript" src = "../js/ext-all.js" ></ script > < script type = "text/javascript" src = "../js/CartoonExt.js" ></ script > </ head > < body > < div style = "width: 300px; height: 300px;" > <!-- 被移动的元素 --> < img id = "picture" src = "../images/test_1.jpg" > </ div > < div style = "text-align: center;" > < input type = "button" value = " 刷新 " onclick = "reset()" > < input type = "button" value = " 逐渐放大 " onclick = "enlarge();" > < input type = "button" value = " 淡出 " onclick = "fadeout();" > < input type = "button" value = " 淡入 " onclick = "fadein();" > < input type = "button" value = " 连续动画 " onclick = "play();" > < 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 = "execution();" > </ div > </ body > </ html >
----------------------------------------------------------------------------------------------------------------
部分参数如下:
fadeIn ( [Object options] ) : Ext.Element 渐显 options 参数有以下属性 callback:Function 完成后的回叫方法 scope:Object 目标 easing:String 行为方法 默认值是:easeOut, 可选值如下 字段值 说明 easeNone 匀速 easeIn 开始慢且加速 easeOut 开始快且减速 easeBoth: 开始慢且减速 easeInStrong 开始慢且加速,t 的四次方 easeOutStrong 开始快且减速,t 的四次方 easeBothStrong 开始慢且减速,t 的四次方 afterCls:String 事件完成后元素的样式 duration:Number 事件完成时间(以秒为单位) remove:Boolean 事件完成后元素销毁? useDisplay:Boolean 隐藏元素是否使用display 或visibility 属性? afterStyle:String/Object/Function 事件完成后应用样式 block:Boolean 块状化 concurrent:Boolean 顺序还是同时执行 stopFx :Boolean 当前效果完成后随合的效果是否将停止和移除 fadeOut( [Object options] ) : Ext.Element 渐隐 fadeOut 和fadeIn 能使用一个特别的endOpacity 属性以指示结束时的透明度 例:el.fadeIn({duration:5,endOpacity:0.7}); frame( [String color], [Number count], [Object options] ) : Ext.Element 边框变亮扩展然后渐隐 例:el.frame("ff0000", 10, { duration: 3 }) ghost( [String anchor], [Object options] ) : Ext.Element 渐渐滑出视图,anchor 定义 tl 左上角( 默认) t 上居中 tr 右上角 l 左边界的中央 c 居中 r 右边界的中央 bl 左下角 b 下居中 br 右下角 例: el.ghost('b', { easing: 'easeOut', duration: .5 remove: false, useDisplay: false }); hasActiveFx() : Boolean 指示元素是否当前有特效正在活动 hasFxBlock() : Boolean 是否有特效阻塞了 highlight( [String color], [Object options] ) : Ext.Element 高亮显示当前元素 例:el.highlight("ffff9c", { attr: "background-color", //can be any valid CSS property (attribute) that supports a color value endColor: (current color) or "ffffff", easing: 'easeIn', duration: 1 }); pause( Number seconds ) : Ext.Element 暂停 puff( [Object options] ) : Ext.Element 元素渐大并隐没 例:el.puff({ easing: 'easeOut', duration: .5, remove: false, useDisplay: false }); scale( Number width, Number height, [Object options] ) : Ext.Element 缩放 例:el.scale( [element's width], [element's height], { easing: 'easeOut', duration: .35 }); sequenceFx() 特效序列 shift( Object options ) : Ext.Element 位移, 并可重置大小, 透明度等 例: el.shift({ width: [element's width], height: [element's height], x: [element's x position], y: [element's y position], opacity: [element's opacity], easing: 'easeOut', duration: .35 }); slideIn( [String anchor], [Object options] ) : Ext.Element 淡入 slideOut( [String anchor], [Object options] ) : Ext.Element 淡出 例:el.slideIn('t', { easing: 'easeOut', duration: .5 }); stopFx() : Ext.Element 停止特效 switchOff( [Object options] ) : Ext.Element 收起并隐没 例: el.switchOff({ easing: 'easeIn', duration: .3, remove: false, useDisplay: false });
参考:http://blog.sina.com.cn/s/blog_74684ec501015lhq.html
相关文章推荐
- ExtJS简单的动画效果(ext js淡入淡出特效)
- ExtJS简单的动画效果
- Android:简单动画效果-淡入淡出播放
- Android 四种简单的动画(淡入淡出、旋转、移动、缩放效果)
- Css3动画效果,超简单的loveHeart,爱心特效,程序员表白必备
- Core Animation基础介绍、简单使用CALayer以及多种动画效果
- UIDatePicker 控件获取本地时间 和 UIDatePicker的移出移回(简单的动画移动效果)
- 前端动画效果实现的简单比较
- ListView之简单动画效果实现
- 简单图片上滚动轴动画效果
- javascript特效实现――当前时间和倒计时效果的简单实例
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现
- osg简单渐变动画物体的淡入淡出
- JQuery(二)——简单动画效果
- jQuery效果-隐藏、显示、切换、滑动、淡入淡出以及动画。
- CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
- JS简单实现动画弹出层效果
- 纯CSS3超酷3D旋转立方体动画特效效果演示
- 简单做出HTML5翻页效果文字特效
- Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现