jQuery實現帶滾動導航效果的全屏滾動相冊實例

 　　本文實例講述了jQuery實現帶滾動導航效果的全屏滾動相冊。分享給大家供大家參考。具體如下：

　　運行效果圖如下：

　　主要代碼如下：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 $(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); }); } });

　　希望本文所述對大家的jQuery程序設計有所幫助。