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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 (function($) { $.fn.thumbnailSlider = function(options) { var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options); return this.each(function() { var $this = $(this), o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts; var $ts_container= $this.children('.ts_container'), $ts_thumbnails= $ts_container.children('.ts_thumbnails'), $nav_elems= $ts_container.children('li').not($ts_thumbnails), total_elems= $nav_elems.length, $ts_preview_wrapper= $ts_thumbnails.children('.ts_preview_wrapper'), $arrow= $ts_thumbnails.children('span'), $ts_preview= $ts_preview_wrapper.children('.ts_preview'); /* 計算出$ts_thumbnails的尺寸： width -> width thumbnail + border (2*5) height -> height thumbnail + border + triangle height(6) top-> -(height plus margin of 5) left-> leftDot - 0.5*width + 0.5*widthNavDot 當鼠標經過導航的時候它將會被設定並且默認的值將會賦給導航的第一個預覽點 */ var w_ts_thumbnails= o.thumb_width + 2*5, h_ts_thumbnails= o.thumb_height + 2*5 + 6, t_ts_thumbnails= -(h_ts_thumbnails + 5), $first_nav= $nav_elems.eq(0), l_ts_thumbnails= $first_nav.position().left - 0.5*w_ts_thumbnails + 0.5*$first_nav.width(); $ts_thumbnails.css({ width: w_ts_thumbnails + 'px', height: h_ts_thumbnails + 'px', top: t_ts_thumbnails + 'px', left: l_ts_thumbnails + 'px' }); /* 計算出提示箭頭的上方和左邊的位置 top-> thumb height + border(2*5) left-> (thumb width + border)/2 -width/2 */ var t_arrow= o.thumb_height + 2*5, l_arrow= (o.thumb_width + 2*5) / 2 - $arrow.width() / 2; $arrow.css({ left: l_arrow + 'px', top: t_arrow + 'px' }); /* 計算出$ts_preview的寬度->縮略圖的寬度乘以所有縮略圖的數量 */ $ts_preview.css('width' , total_elems*o.thumb_width + 'px'); /* 設定 $ts_preview_wrapper 的寬度和高度 -> thumb width / thumb height */ $ts_preview_wrapper.css({ width: o.thumb_width + 'px', height: o.thumb_height + 'px' }); //鼠標經過導航的元素 $nav_elems.bind('mouseenter',function(){ var $nav_elem= $(this), idx= $nav_elem.index(); /* 計算出 $ts_thumbnails 最新的左側距離 */ var new_left= $nav_elem.position().left - 0.5*w_ts_thumbnails + 0.5*$nav_elem.width(); $ts_thumbnails.stop(true) .show() .animate({ left: new_left + 'px' },o.speed,o.easing); /* 動畫從 $ts_preview 的左側過渡到右邊的縮略圖 */ $ts_preview.stop(true) .animate({ left: -idx*o.thumb_width + 'px' },o.speed,o.easing); //當鼠標停留的時候圖片進行放大 if(o.zoom && o.zoomratio > 1){ var new_width= o.zoomratio * o.thumb_width, new_height= o.zoomratio * o.thumb_height; //增加 $ts_preview 的寬度為了能夠讓圖片放大 var ts_preview_w= $ts_preview.width(); $ts_preview.css('width' , (ts_preview_w - o.thumb_width + new_width) + 'px'); $ts_preview.children().eq(idx).find('img').stop().animate({ width: new_width + 'px', height: new_height + 'px' },o.zoomspeed); } }).bind('mouseleave',function(){ //如果放大了設置它的寬度和高度為默認值 if(o.zoom && o.zoomratio > 1){ var $nav_elem= $(this), idx= $nav_elem.index(); $ts_preview.children().eq(idx).find('img').stop().css({ width: o.thumb_width + 'px', height: o.thumb_height + 'px' }); } $ts_thumbnails.stop(true) .hide(); }).bind('click',function(){ var $nav_elem= $(this), idx= $nav_elem.index(); o.onClick(idx); }); }); }; $.fn.thumbnailSlider.defaults = { speed: 100,// 幻燈片過渡的動畫速度 easing: 'jswing',// easing動畫效果 thumb_width: 75,//您的圖片寬度 thumb_height: 75,//您的圖片高度 zoom: false,//縮略圖是否放大 zoomratio: 1.3,// 放大比率（數值必須大於1） zoomspeed: 15000,//放大動畫的速度 onClick: function(){return false;}//點擊回發 }; })(jQuery);

　　完整實例代碼點擊此處本站下載。

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