转自：http://blog.sina.com.cn/s/blog_74684ec501015lhq.html

说明：这篇文章的大部分内容来源于网上，经过自己实现其效果后，整理如下：

在进行 Javascript 开发，有时会有一些动画效果的实现需要，这往往浪费了开发人员不必要的精力。而 Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效，减少了我们自己手写代码的复杂度。

（注意导入js和css文件的目录，图片自己设置）

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.getElementById( 'easing' ).value;

    Ext. get ( 'picture' ).setLocation(150, 150, {

       duration : 1.0,

       easing : easingMethod

    });

}

<! 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 >

• 标签：
• /
• /
• /
• /
• /
• /

• 本文已收录于以下专栏：

相关文章推荐