$(function() {//加載時的圖片var $loader= $('#st_loading');//獲取的ul元素var $list= $('#st_nav');//當前顯示的圖片var $currImage = $('#st_main').children('img:first');//加載當前的圖片//同時顯示導航的項$('<img>').load(function(){$loader.hide();$currImage.fadeIn(3000);//滑出導航setTimeout(function(){$list.animate({'left':'0px'},500);},1000);}).attr('src',$currImage.attr('src'));//計算出將被顯示的略縮圖所在的div元素的寬度buildThumbs();function buildThumbs(){$list.children('li.album').each(function(){var $elem = $(this);var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');var $thumbs = $thumbs_wrapper.children(':first');//每張略縮圖占有180像素的寬度和3像素的間距(margin)var finalW = $thumbs.find('img').length * 183;$thumbs.css('width',finalW + 'px');//是這元素具有滾動性makeScrollable($thumbs_wrapper,$thumbs);});}//點擊菜單項目的時候（向上向下箭頭切換）//使略縮圖的div層顯示和隱藏當前的//打開菜單（如果有的話）$list.find('.st_arrow_down').live('click',function(){var $this = $(this);hideThumbs();$this.addClass('st_arrow_up').removeClass('st_arrow_down');var $elem = $this.closest('li');$elem.addClass('current').animate({'height':'170px'},200);var $thumbs_wrapper = $this.parent().next();$thumbs_wrapper.show(200);});$list.find('.st_arrow_up').live('click',function(){var $this = $(this);$this.addClass('st_arrow_down').removeClass('st_arrow_up');hideThumbs();});//點擊略縮圖，改變大的圖片$list.find('.st_thumbs img').bind('click',function(){var $this = $(this);$loader.show();$('<img class="st_preview"/>').load(function(){var $this = $(this);var $currImage = $('#st_main').children('img:first');$this.insertBefore($currImage);$loader.hide();$currImage.fadeOut(2000,function(){$(this).remove();});}).attr('src',$this.attr('alt'));}).bind('mouseenter',function(){$(this).stop().animate({'opacity':'1'});}).bind('mouseleave',function(){$(this).stop().animate({'opacity':'0.7'});});//隱藏當前已經打開了的菜單的函數function hideThumbs(){$list.find('li.current') .animate({'height':'50px'},400,function(){$(this).removeClass('current'); }) .find('.st_thumbs_wrapper') .hide(200) .andSelf() .find('.st_link span') .addClass('st_arrow_down') .removeClass('st_arrow_up');}//是當前的略縮圖div層滾動//當鼠標移至菜單層的時候會自動地進行滾動function makeScrollable($outer, $inner){var extra = 800;//獲取菜單的寬度var divWidth = $outer.width();//移除滾動條$outer.css({overflow: 'hidden'});//查找容器上的最后一張圖片var lastElem = $inner.find('img:last');$outer.scrollLeft(0);//當用戶鼠標離開菜單的時候$outer.unbind('mousemove').bind('mousemove',function(e){var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;$outer.scrollLeft(left);});}});