zoukankan      html  css  js  c++  java
  • ExtJS简单的动画效果2(ext js淡入淡出特效)

    Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度。

    面我给出一个简单的实例代码,其中囊括了大部分的 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 = " 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({
         [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

  • 相关阅读:
    jquery.stop()停止动画
    字符串转义
    CSS规范 (命名)- 分类方法
    inline-block 间距
    jquery中offset(),position()
    PHP把数组转换为JSON字符串
    json对象
    C#-静态实例
    C#-readonly与const区别
    SQL-事务隔离级别与锁
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416477.html
Copyright © 2011-2022 走看看