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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
微信小程序日期时间选择器使用方法
Feb 01 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
在PHP中使用模板的方法
2008/05/24 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
tab栏切换原理
2017/03/22 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
初中体育教学反思
2014/01/14 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2015年底工作总结范文
2015/05/15 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
MySQL锁机制
2021/04/05 MySQL
python实现腾讯滑块验证码识别
2021/04/27 Python
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
python开发制作好看的时钟效果
2022/05/02 Python