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 相关文章推荐
iframe窗口高度自适应的实现方法
Jan 08 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
百度小程序自定义通用toast组件
Jul 17 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环境――Appserv
2006/12/13 PHP
php 文件状态缓存带来的问题
2008/12/14 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
pandas 选择某几列的方法
2018/07/03 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
槐乡的孩子教学反思
2014/04/27 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
不同意离婚代理词
2015/05/23 职场文书
南京大屠杀观后感
2015/06/02 职场文书
军训决心书范文
2015/09/22 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android