<link rel="stylesheet" type="text/css" media="screen" href="css/all-examples.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/dock-example1.js"></script>
<!-- BEGIN DOCK 1 ============================================================ -->
        <div id="dock">
                <div class="dock-container">
                        <a class="dock-item" href="index.html"><span>Example&nbsp;1</span><img src="images/dock/home.png" alt="home" /></a> 
                        <a class="dock-item" href="example2.html"><span>Example&nbsp;2</span><img src="images/dock/email.png" alt="contact" /></a> 
                        <a class="dock-item" href="example3.html"><span>Example&nbsp;3</span><img src="images/dock/portfolio.png" alt="portfolio" /></a> 
                        <a class="dock-item" href="all-examples.html"><span>All&nbsp;Examples</span><img src="images/dock/music.png" alt="music" /></a> 
                        <a class="dock-item" href="#"><span>Video</span><img src="images/dock/video.png" alt="video" /></a> 
                        <a class="dock-item" href="#"><span>History</span><img src="images/dock/history.png" alt="history" /></a> 
                        <a class="dock-item" href="#"><span>Calendar</span><img src="images/dock/calendar.png" alt="calendar" /></a> 
                        <a class="dock-item" href="#"><span>Links</span><img src="images/dock/link.png" alt="links" /></a> 
                        <a class="dock-item" href="#"><span>RSS</span><img src="images/dock/rss.png" alt="rss" /></a> 
                        <a class="dock-item" href="#"><span>RSS2</span><img src="images/dock/rss2.png" alt="rss" /></a> 
                </div><!-- end div .dock-container -->
        </div><!-- end div .dock #dock -->

dock-example1.js
var $j = jQuery.noConflict();
$j(function () { 
        // Dock initialize
        $j('#dock').Fisheye(
                {
                        maxWidth: 30,
                        items: 'a',
                        itemsText: 'span',
                        container: '.dock-container',
                        itemWidth: 50,
                        proximity: 60,
                        alignment : 'left',
                        valign: 'bottom',
                        halign : 'center'
                }
        );
}); 

<script type="text/javascript" src="js/mootools.js"></script>  //mootools.js是一个框架
<script type="text/javascript" src="js/imageMenu.js"></script>
<div id="containers">
                <div id="example">
                        <div id="imageMenu">
                        <ul>
                                <li class="landscapes"><a>Landscapes</a></li>
                                <li class="people"><a href="/" target="_blank">People</a></li>
                                <li class="nature"><a href="/" target="_blank">Nature</a></li>
                                <li class="urban"><a href="/" target="_blank">Urban</a></li>
                                <li class="abstract"><a href="/" target="_blank">Abstract</a></li>
                        </ul>
                        </div>
                
                <script type="text/javascript">
                        window.addEvent('domready', function(){
                                var myMenu = new ImageMenu($('#imageMenu a'),{openWidth:750, border:2, onOpen:function(e,i){window.open(e);}});
                        });
                </script>

                </div>
        </div>

imageMenu.js
var ImageMenu = new Class({
        
        getOptions: function(){
                return {
                        onOpen: false,
                        onClose: Class.empty,
                        openWidth: 200,
                        transition: Fx.Transitions.quadOut,
                        duration: 400,
                        open: null,
                        border: 0
                };
        },

        initialize: function(elements, options){
                this.setOptions(this.getOptions(), options);
                
                this.elements = $(elements);
                
                this.widths = {};
                this.widths.closed = this.elements[0].getStyle('width').toInt();
                this.widths.openSelected = this.options.openWidth;
                this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))
                
                
                this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
                
                this.elements.each(function(el,i){
                        el.addEvent('mouseenter', function(e){
                                new Event(e).stop();
                                this.reset(i);
                                
                        }.bind(this));
                        
                        el.addEvent('mouseleave', function(e){
                                new Event(e).stop();
                                this.reset(this.options.open);
                                
                        }.bind(this));
                        
                        var obj = this;
                        
                        el.addEvent('click', function(e){

                                if(obj.options.onOpen){
                                        new Event(e).stop();
                                        if(obj.options.open == i){
                                                obj.options.open = null;
                                                obj.options.onClose(this.href, i);
                                        }else{
                                                obj.options.open = i;
                                                obj.options.onOpen(this.href, i);
                                        }
                                        
                                        
                                }
                                
                        })
                        
                }.bind(this));
                
                if(this.options.open){
                        if($type(this.options.open) == 'number'){
                                this.reset(this.options.open);
                        }else{
                                this.elements.each(function(el,i){
                                        if(el.id == this.options.open){
                                                this.reset(i);
                                        }
                                },this);
                        }
                }
                
        },
        
        reset: function(num){
                if($type(num) == 'number'){
                        var width = this.widths.openOthers;
                        if(num+1 == this.elements.length){
                                width += this.options.border;
                        }
                }else{
                        var width = this.widths.closed;
                }
                
                var obj = {};
                this.elements.each(function(el,i){
                        var w = width;
                        if(i == this.elements.length-1){
                                w = width+5
                        }
                        obj[i] = {'width': w};
                }.bind(this));
                
                if($type(num) == 'number'){
                        obj[num] = {'width': this.widths.openSelected};
                }
                                
                this.fx.start(obj);
        }
        
});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events);