本实例用到了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>

本地下载

最新文章

  1. x
  2. PS通过滤色实现简单的图片拼合
  3. kali 初始化
  4. JS兼容所有浏览器的一段加入收藏代码，设置为首页
  5. HDU 3853：LOOPS（概率DP）
  6. Unity3D中目标相对自身的前后左右方位判断
  7. addEventListener，attachEvent
  8. 虚拟机无法上网的问题：无法启动VMnet0等问题
  9. OS X 使用技巧——在Finder窗口标题栏上显示路径
  10. [转]SVN:This client is too old to work with working copy 的解决方案
  11. Lucene学习笔记： 五，Lucene搜索过程解析
  12. C++静态变量对象的建立和删除，兼论MFC开始运行的起点（全局对象）
  13. perl 简单后门程序
  14. 【小练习04】HTML+CSS--医药健康小页面
  15. 详解连接SQL Server数据库的方法，并使用Statement接口实现对数据库的增删改操作
  16. ASP.NET Core中使用IOC三部曲(二.采用Autofac来替换IOC容器,并实现属性注入)
  17. Kotlin 扩展——省略findViewById
  18. git配置公钥
  19. Java+Selenium操作日期时间选择框插件
  20. 微信小程序创建一个新项目

热门文章

  1. 使用selenium的方式获取网页中图片的链接和网页的链接，来判断是否是死链（二）
  2. Java 使用正则表达式取出图片地址以及跳转的链接地址，来判断死链（一）
  3. OpenLayers学习笔记2——坐标转换问题
  4. 设置和重置ssh key
  5. PAT (Basic Level) Practise （中文）- 1005. 继续(3n+1)猜想 (25)
  6. WebAppBuilder独立于portal之arcgis for js应用框架研究之二
  7. Uva 网络(Network,Seoul 2007,LA 3902)
  8. Nginx+proxy_cache图片缓存
  9. python用requests请求，报SSL:CERTIFICATE_VERIFY_FAILED错误。
  10. git bash 学习2 --更改url 重置密钥 Permission denied (publickey)问题