jquery实现的缩略图预览滑块实例

时间:2021-05-26

本文实例讲述了jquery实现的缩略图预览滑块。分享给大家供大家参考。具体如下:

运行效果如下图所示:

主要代码如下:

(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.css('width' , total_elems*o.thumb_width + 'px');$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();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.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程序设计有所帮助。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章