时间: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邮箱联系删除。
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果。分享给大家供大家参考。具体如下:这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮
本文实例讲述了C#简单生成缩略图的方法。分享给大家供大家参考。具体实现方法如下://////生成缩略图//////源图路径(物理路径)///缩略图路径(物理路径
复制代码代码如下:///生成缩略图//////源图路径///缩略图路径///缩略图宽度///缩略图高度///生成缩略图的方式:HW指定高宽缩放(可能变形);W指
打开文件夹时一般会显示文件的缩略图预览,但很多时候PPT模板编辑修改后,缩略图预览的内容没有同步修改,显示的缩略图就会和内容不同,下面我们就来看看详细的教程。软
DedeCMS文章列表页默认是有缩略图显示缩略图,没有缩略图则显示默认的空白缩略图,但是为了让我们的页面显示更美观更智能化,有时需要让织梦列表文章有缩略图则调用