当前位置:首页 > 编程教程 > jQuery技术文章 > jquery实现的缩略图预览滑块实例

解析jquery缩略图预览滑块的实现

  • 发布时间:
  • 作者:码农之家
  • 点击:74

这篇文章主要知识点是关于jquery、缩略图、滑块、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF作者:大卫·索耶·麦克法兰德
立即下载

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

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

运行效果如下图所示:

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的宽度->缩略图的宽度乘以所有缩略图的数量
*/
$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程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.250958

jQuery左右滚动支持图片放大缩略图轮播实例代码

本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果。分享给大家供大家参考。具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果。 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的jQuery左右滚动支持图片放大缩略图图片轮播效果代码如下 headmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titlejQuery左右滚动支持图片放大缩略图图片轮播代码/titlescript src=http://www.lanrenzhijia.com/ajaxjs/jquery.min.js /script!--[if IE 6] script src=js/iepng.js type=text/javascript/script script type=text/javascript EvPNG.fix(div, ul, img, li, input,a,span); /script![endif]--/headstyle type=text/css*{ margi……

网友NO.766461

jquery实现5种带缩略图的可定制高度画廊效果

本文实例讲述了jquery可定制高度画廊效果。分享给大家供大家参考。具体如下: 这是一款基于jquery可定制高度画廊效果代码,很有艺术感,带有五种飞行展示效果,最大的特点是可以定制高度,是一款非常实用的特效代码,值得大家学习。 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的jquery图片滚动放大效果代码如下 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtdhtmlhead link rel=stylesheet type=text/css href=jquery.ad-gallery.css script type=text/javascript src=jquery.min.js/script script type=text/javascript src=jquery.ad-gallery.js/script script type=text/javascript $(function() { $(img.image1).data(ad-desc, Whoa! This description is set through elm.data(ad-desc) instead of using the longdesc attribute.brAnd it contains st……

网友NO.961968

jQuery幻灯片带缩略图轮播效果代码分享

这是一款基于jquery实现的底部带缩略图的幻灯片切换特效代码,幻灯片可以点击下方的缩略图切换,用户还可以自定义对应幻灯片的标题与文字说明,是一款非常实用的幻灯片特效源码。 为大家分享的jQuery幻灯片带缩略图轮播代码如下 htmlheadtitle带缩略图的jQuery幻灯片轮播效果/titlelink href="css/css.css" rel="stylesheet" type="text/css"script src="js/jquery-1[1].2.1.pack.js" type="text/javascript"/script/headbodybr/br/div align="center"div id=navUL liIMG src="images/02.jpg" text="美景如画的海景|天蓝海蓝" pic="2" div一个海岛/div/li liIMG src="images/01.jpg" text="Handy Code|春华秋实" pic="1" div一片麦穗/div/li liIMG src="images/03.jpg" text="郁郁葱葱的生命|生生不息的生命" pic="3" div一树绿叶/div/li liIMG src="images/04.jpg" text="孤独的一棵老树|等谁呢?" pic="4" div一棵大树/div/li liIMG src="images/05.jpg" text="明媚的向日葵花|生生不息……

网友NO.739511

jQuery点缩略图弹出层显示大图片

2015年繁忙的一月份,无更多时间去学习ASP.NET MVC程序,二月份又是中国的新年,长达半个月的假期,望回到老家中,在无电脑无网络的日子里,能有更多时间陪伴年迈的父母亲。 今天学习jQuery的相关知识,应用到图片上,用户点一点图片,放大显示图片功能。 创建一个控制器FebY15Controller: 接下来创建视图Index: 标记1,添加图片样式: 标记2,添加htm代码,原片显示以及放大图片的占位div标签: 标记3,引用jQuery类库。 标记4,编写jQuery程序: 下面是动态演示: 本篇中,可以学到jQuery的click事件。使用标签.样式类获取对象(img.thumb)。使用$(this)来代码对象本身。.attr("scr")获取图片src图片路径。还有一个就是.animate()动态事件。 ……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com