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 相关文章推荐
js 数组克隆方法 小结
Mar 20 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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
关于时间计算的结总
2006/12/06 PHP
php下连接mssql2005的代码
2011/01/17 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
python tornado微信开发入门代码
2018/08/24 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python实现画循环圆
2019/11/23 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
弘扬民族精神演讲稿
2014/05/07 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
高中政治教师教学反思
2016/02/23 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js