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


Posted in Javascript onJune 25, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
使用javascript提交form表单方法汇总
Jun 25 #Javascript
Jquery结合HTML5实现文件上传
Jun 25 #Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 #Javascript
javascript学习笔记之函数定义
Jun 25 #Javascript
把Node.js程序加入服务实现随机启动
Jun 25 #Javascript
javascript控制台详解
Jun 25 #Javascript
jquery实现浮动的侧栏实例
Jun 25 #Javascript
You might like
第十三节--对象串行化
2006/11/16 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
Python的高级Git库 Gittle
2014/09/22 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
初中物理教学反思
2014/01/14 职场文书
素质教育标语
2014/06/27 职场文书
合作与交流自我评价
2015/03/09 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
Python各协议下socket黏包问题原理
2022/04/12 Python