本实例用到了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. git入门使用摘录

    无论使用github或者gitlab,第一步都是在本地生产ssh-key,ssh-key作为客户端的身份证存放在user用户的.ssh文件夹下.如果之前没有生产过,需要用ssh-keygen命令生成. ...

  2. UVA Mega Man's Mission（状压dp）

    把消灭了那些机器人作为状态S,预处理出状态S下可以消灭的机器人,转移统计方案.方案数最多16!,要用64bit保存方案. #include<bits/stdc++.h> using nam ...

  3. 【洛谷3527】[POI2011] MET-Meteors（树状数组+整体二分）

    点此看题面 大致题意: 一颗星球被分为\(M\)份,分别属于\(N\)个国家,有\(K\)场陨石雨,第\(i\)个国家希望收集\(P_i\)颗陨石,问其至少要在第几次陨石雨后才能达到目标. 关于整体二 ...

  4. 【洛谷2468】[SDOI2010] 粟粟的书架（二合一）

    点此看题面 大致题意: 问你选取一个矩形区间内至少几个数,才能使它们的和\(\ge H_i\). 二合一 根据数据范围,比较显然能看出它是一道二合一的题目. 对于第一种情况,\(R,C\le 200\ ...

  5. python_44_文件属性

    #打印文件属性信息 import os#os.stat()返回的文件属性元组元素的含义 filestats=os.stat('yesterday')#获取文件/目录的状态 print(filestat ...

  6. 关于java的自增问题

    程序执行结果是0,,,因为count永远是0

  7. 0.5px的边框

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. react 的虚拟dom

    前端优化的主要方面就是减少页面的DOM操作,减少重排和重绘,React在这方面做了优化,采用了所谓的虚拟DOM,其实我们平时也会遇到虚拟DOM,只是你没有注意罢了,请听我娓娓道来.  所谓的虚拟DOM ...

  9. testC-I

    总时间限制:  20000ms 单个测试点时间限制:  1000ms 内存限制:  128000kB 描述 给你一组数,a1,a2,a3,⋯,an. 令:G=gcd(a1,a2,a3,⋯,an) 现在 ...

  10. JavaScript常用八种继承方案

    更新:在常用七种继承方案的基础之上增加了ES6的类继承,所以现在变成八种啦,欢迎加高级前端进阶群一起学习(文末). --- 2018.10.30 1.原型链继承 构造函数.原型和实例之间的关系:每个构 ...