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 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
js时间查询插件使用详解
Apr 07 Javascript
详解node中创建服务进程
May 09 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 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
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
python中K-means算法基础知识点
2021/01/25 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
英语道歉信范文
2014/01/09 职场文书
经典团队口号
2014/06/06 职场文书
多媒体教室标语
2014/06/26 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
人民币使用说明书
2019/04/17 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS