本实例用到了jquery.imgbox.pack.js库。直接看代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <meta name="keywords" content="" />

 <meta name="description" content="" />

 <title>3种jQuery弹出大图效果</title>

 <link rel="stylesheet" href="http://7u2iij.com1.z0.glb.clouddn.com/images_style.css" />

 <script type="text/javascript" src="js/jquery.min.js"></script>

 <script type="text/javascript" src="js/jquery.imgbox.pack.js"></script>

     <script type="text/javascript">

         $(document).ready(function() {

             $("#pic1").imgbox();

             $("#pic2").imgbox({

                 'zoomOpacity'    : true,

                 'alignment'        : 'center'

             });

             $("#pic3").imgbox({

                 'speedIn'        : 0,

                 'speedOut'        : 0,

                 'alignment'        : 'center',

                 'overlayShow'    : true,

                 'allowMultiple'    : false

             });

         });

     </script>

 </head>

 <body>

 <!-- 代码 BEGIN -->

 <div id="content">

     <h1>imgBox--图片点击放大示例</h1>

     <hr />

     <div id="images">

         <a id="pic1" title="图片一" href="http://7u2iij.com1.z0.glb.clouddn.com/pic1.jpg"><img alt="" src="http://7u2iij.com1.z0.glb.clouddn.com/pic1.jpg" width="150" height="90" /></a>

         <a id="pic2" title="图片二" href="http://7u2iij.com1.z0.glb.clouddn.com/pic2.jpg"/><img alt="" src="http://7u2iij.com1.z0.glb.clouddn.com/pic2.jpg" width="150" height="90" /></a>

         <a id="pic3" title="图片三" href="http://7u2iij.com1.z0.glb.clouddn.com/pic3.jpg"><img alt="" src="http://7u2iij.com1.z0.glb.clouddn.com/pic3.jpg" width="150" height="90" /></a>

     </div>

     <div><a href="" target="_blank" class="download">本地下载</a></div>

 </div>

 <!-- 代码 END -->

 <div style="text-align:center">

     <p>文章来源：<a href="http://www.cnblogs.com/iyitong/" target="_blank">cyt静风</a></p>

 </div>

 </body>

 </html>

本地下载

3种jQuery弹出大图效果的更多相关文章

  1. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  2. jquery 弹出框效果

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. JQuery弹出层，实现弹层切换，可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  7. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  8. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  9. jQuery弹出美女大图片

    效果:http://hovertree.com/texiao/jqimg/2/ 效果图: 下载:http://hovertree.com/h/bjaf/jdaqepet.htm HTML代码: < ...

随机推荐

  1. IOS 图片剪切（封装数据）

    封装 :生成头像(UIImage (NJ).h / .m @interface UIImage (NJ) /** * 生成头像 * * @param icon 头像图片名称 * @param bord ...

  2. matlplotlib 为折线图填充渐变颜色

    概要   本篇记录绘图时填充颜色时的一些常用设置,主要用到了 imshow,fill 函数.   填充图实例   填充的效果图如下: 图 1:渐变色效果图 可根据下方给出的代码进行自定义. #!/us ...

  3. 快速排序算法思路分析和C++源代码(递归和非递归)

    快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高,因此经常被采用,再加上快速排序思想----分治法也确实实用,因此很多软件公司的笔试面试喜欢考这个. 快速排序是C.R.A.Hoar ...

  4. Linux yum安装

    一．安装Apache软件步骤:1.安装 yum install httpd 2.启动,关闭 重启等命令systemctl start httpd.service(启动)systemctl restar ...

  5. vitrual box安装centos时一直黑屏的解决办法

    趁着清明节没事,昨天看了mysql性能优化后,想装个linux系统学习下,linux一直是我的短板...之前是在vmware上安装ubuntu,买了新电脑后,听过virtual box相比vmware ...

  6. 【CSS】非常简单的css实现div悬浮页面底部

    <div id="demo_div"></div> <style> #demo_div{ left:; position: fixed; bot ...

  7. python3 爬取汽车之家所有车型数据操作步骤（更新版）

    题记: 互联网上关于使用python3去爬取汽车之家的汽车数据(主要是汽车基本参数,配置参数,颜色参数,内饰参数)的教程已经非常多了,但大体的方案分两种: 1.解析出汽车之家某个车型的网页,然后正则表 ...

  8. Leetcode 872. 叶子相似的树

    题目链接 https://leetcode-cn.com/problems/leaf-similar-trees/description/ 题目描述 请考虑一颗二叉树上所有的叶子,这些叶子的值按从左到 ...

  9. HOJ_14001 Just Terraffic!

    题意相对来说比较扭曲..所以来说下模型,具体做法有兴趣的孩纸去问度娘或者波塞冬吧~~ 给出一个序列长度,并且输入该序列,该序列的含义是横坐标: 任何两个相邻坐标绝对值小于等于1000的必然为一个整体, ...

  10. Linux系统自启动脚

    只需编辑/etc/init.d/rc.local文件,在最后加上你的脚本即可. 比如:我已经编写了一个脚本shell.sh,存放在/home/mars704/Desktop/ 下面在终端输入 gedi ...