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 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
Node.js编码规范
Jul 14 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 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 求质素(素数) 的实现代码
2011/04/12 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
Python3.2模拟实现webqq登录
2016/02/15 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python教程之全局变量用法
2016/06/27 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Django如何实现上传图片功能
2019/08/16 Python
Python实现Restful API的例子
2019/08/31 Python
解决Python中回文数和质数的问题
2019/11/24 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
模具专业自荐信
2014/05/29 职场文书
小学语文教学随笔
2015/08/14 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
使用Python开发冰球小游戏
2022/04/30 Python