jQuery实现点击小图显示大图代码分享


Posted in Javascript onAugust 25, 2015

本文实例讲述了jQuery实现点击小图显示大图效果。分享给大家供大家参考。具体如下:
这是一款基于jQuery实现的点击小图查看大图的代码,适合用于产品展示等环节,便于用户浏览产品细节,是一款非常实用的特效代码。
运行效果图:    ----------------------查看效果-----------------------

jQuery实现点击小图显示大图代码分享 

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery实现点击小图显示大图效果代码如下

<head>
 
 <title>jQuery实现点击小图显示大图效果</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script>
 <script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
 <script type="text/javascript" src="js/pngobject.js"></script>
 <link rel="stylesheet" href="style/style.css" type="text/css" />
 <link rel="stylesheet" href="style/jquery.fancybox-1.3.1.css" type="text/css" />
 <script type="text/javascript">
 $(document).ready(function() {
  /*
  *  Examples - images
  */

  $("a#example1").fancybox({
  'titleShow' : false
  });

  $("a#example2").fancybox({
  'titleShow' : false,
  'transitionIn' : 'elastic',
  'transitionOut' : 'elastic'
  });

  $("a#example3").fancybox({
  'titleShow' : false,
  'transitionIn' : 'none',
  'transitionOut' : 'none'
  });

  $("a#example4").fancybox();

  $("a#example5").fancybox({
  'titlePosition' : 'inside'
  });

  $("a#example6").fancybox({
  'titlePosition' : 'over'
  });

  $("a[rel=example_group]").fancybox({
  'transitionIn' : 'none',
  'transitionOut' : 'none',
  'titlePosition' : 'over',
  'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
   return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
  }
  });

  /*
  *  Examples - various
  */

  $("#various1").fancybox({
  'titlePosition' : 'inside',
  'transitionIn' : 'none',
  'transitionOut' : 'none'
  });

  $("#various2").fancybox();

  $("#various3").fancybox({
  'width'  : '75%',
  'height'  : '75%',
  'autoScale'  : false,
  'transitionIn' : 'none',
  'transitionOut' : 'none',
  'type'  : 'iframe'
  });

  $("#various4").fancybox({
  'padding'  : 0,
  'autoScale'  : false,
  'transitionIn' : 'none',
  'transitionOut' : 'none'
  });
 });
 </script>
</head>
<body>

<div id="content">
 <h4>jQuery 实现点击小图显示大图</h4>
 <p>
 <a rel="example_group" href="example/11.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="example/1.jpg" /></a>

 <a rel="example_group" href="example/22.jpg" title=""><img alt="" src="example/2.jpg" /></a>

 <a rel="example_group" href="example/44.jpg" title=""><img alt="" src="example/4.jpg" /></a>
 </p>
 <p>
 <a rel="example_group" href="example/33.jpg" title=""><img alt="" src="example/3.jpg" /></a>

 <a rel="example_group" href="example/8_b.jpg" title=""><img alt="" src="example/8_s.jpg" /></a>

 <a rel="example_group" href="example/9_b.jpg" title=""><img alt="" src="example/9_s.jpg" /></a>
 </p>
</div>
<div><p> </p></div>
</body>
</html>

以上就是为大家分享的jQuery实现点击小图显示大图效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 #Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 #Javascript
基于jQuery实现在线选座之高铁版
Aug 24 #Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 #Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 #Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 #Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 #Javascript
You might like
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
css图片自适应大小
2007/11/28 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
python实现石头剪刀布程序
2021/01/20 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
实习教师自我鉴定
2013/12/09 职场文书
党员创先争优心得体会
2014/09/11 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
Golang map映射的用法
2022/04/22 Golang