$(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'});
});
//隱藏當前已經(jīng)打開了的菜單的函數(shù)
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);
});
}
});