Mootools 1.2教程(23)——滑动效果（Slide）（5）

最后，是我们的Mootools JavaScript代码：

参考代码： 

window.addEvent('domready', function() { 
    // 示例A 
    var slideElement = $('slideA'); 

    var slideVar = new Fx.Slide(slideElement, { 
        // Fx.Slide选项 
        mode: 'horizontal', // 默认是'vertical' 
        //wrapper: this.element, // 默认是this.element 

        // Fx选项 
        link: 'cancel', 
        transition: 'elastic:out', 
        duration: 'long',  

        // Fx事件 
        onStart: function(){ 
            $('start').highlight("#EBCC22"); 
        }, 

        onCancel: function(){ 
            $('cancel').highlight("#EBCC22"); 
        }, 

        onComplete: function(){ 
            $('complete').highlight("#EBCC22"); 
        } 
    }).hide().show().hide(); // 注意，.hide和.show方法并不触发事件 

    $('openA').addEvent('click', function(){ 
        slideVar.slideIn(); 
    }); 

    $('closeA').addEvent('click', function(){ 
        slideVar.slideOut(); 
    }); 

   
    // 示例B 
    var slideElementB = $('slideB'); 

    var slideVarB = new Fx.Slide(slideElementB, { 
        // Fx.Slide选项 
        mode: 'vertical', // 默认是'vertical' 

        // Fx选项 
        // 注意：链式效果可以让你多次点击， 
        // 当鼠标离开后， 
        // 每次点击的动画可以依次触发 
        link: 'chain',  

        // Fx事件 
        onStart: function(){ 
            $('start').highlight("#EBCC22"); 
        }, 

        onCancel: function(){ 
            $('cancel').highlight("#EBCC22"); 
        }, 

        onComplete: function(){ 
            $('complete').highlight("#EBCC22"); 
        } 
    }); 

    $('openB').addEvent('click', function(){ 
        slideVarB.slideIn(); 
    }); 

    $('closeB').addEvent('click', function(){ 
        slideVarB.slideOut(); 
    }); 

    // 示例 C 
    var slideElementC = $('slideC'); 

    var slideVarC = new Fx.Slide(slideElementC, { 
        // Fx.Slide选项 
        mode: 'vertical', // 默认是'vertical' 
        //wrapper: this.element, // 默认是this.element 

        // Fx选项 
        //link: 'cancel', 
        transition: 'sine:in', 
        duration: 300,  


        // Fx事件 
        onStart: function(){ 
            $('start').highlight("#EBCC22"); 
        }, 

        onCancel: function(){ 
            $('cancel').highlight("#EBCC22"); 
        }, 

        onComplete: function(){ 
            $('complete').highlight("#EBCC22"); 
        } 
    }).hide(); 

    $('openC').addEvent('click', function(){ 
        slideVarC.toggle(); 
    }); 


    $('slideD').slide('hide'); 

    $('openD').addEvent('click', function(){ 
        $('slideD').slide('toggle'); 
    }); 

    // 示例C 
    var slideElementE = $('slideE'); 
    var slideWrap = $('slide_wrap'); 

    var slideVarE = new Fx.Slide(slideElementE, { 
        // Fx.Slide选项 
        //mode: 'vertical', // 默认是'vertical' 
        wrapper: slideWrap // 默认是this.element 
    }).hide();  

    $('openE').addEvent('click', function(){ 
        slideVarE.toggle(); 
    }); 

学习更多……

Fx.Slide是一个多功能，非常有用的插件。要学习更多，查看Fx.Slide文档，Fx.Morph和Fx文档。

另外，也一定要阅读一下我们关于Fx.Morph和Fx选项和事件的教程。

远程下载：下载最后示例代码的zip压缩文件" href="http://www.consideropen.com/downloads/30days_of_moo/mootorial_day23_FxSlide.zip" target=_blank>下载最后示例代码的zip压缩文件(36.5KB)

asp之家下载地址：mootorial_day23_FxSlide.zip(36.5KB)

包含你开始所需要的所有东西。