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 相关文章推荐
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 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
php实现网站插件机制的方法
2009/11/10 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
javascript基本算法汇总
2016/03/09 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
js实现简单扫雷
2020/11/27 Javascript
Python 文件重命名工具代码
2009/07/26 Python
Python while 循环使用的简单实例
2016/06/08 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
门卫岗位安全职责
2013/12/13 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
大学生心理活动总结
2014/07/04 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
开会通知
2015/04/20 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
法人代表资格证明书
2015/06/18 职场文书