本实例用到了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. EF和linq语句查询条件不等于某个参数出现的问题

    where t.a!=字符串   这是错误的写法,正确为 where t.a!=字符串.trim() 其他类型变量需要保持实体类型和查询条件参数的类型是一致的,不然出现的语句可能会是 类似`Exten ...

  2. Codeforces Round #327 (Div. 2) B Rebranding（映射）

    O(1)变换映射,最后一次性替换. #include<bits/stdc++.h> using namespace std; typedef long long ll; ; char s[ ...

  3. Everything Be True-freecodecamp算法题目

    Everything Be True 1.要求 完善every函数,如果集合(collection)中的所有对象都存在对应的属性(pre),并且属性(pre)对应的值为真.函数返回ture.反之,返回 ...

  4. git bash 学习2 --更改url 重置密钥 Permission denied (publickey)问题

    在今天的上传过程中,我意外地遇到了一个问题,,每一次push都会出现 $ git push origin master Permission denied (publickey). fatal: Co ...

  5. Shell脚本使用汇总整理——mysql数据库5.7.8以前备份脚本

    Shell脚本使用汇总整理——mysql数据库5.7.8以前备份脚本 Shell脚本使用的基本知识点汇总详情见连接: https://www.cnblogs.com/lsy-blogs/p/92234 ...

  6. Python_深浅拷贝

    深浅拷贝 ‘copy’和'='的区别:copy会开辟一个新的空间,而‘=’不会. 浅copy只会copy第一层,再里边的就进行共享了. 需要记住的是copy之后记住的是内存寻址地址,而浅copy时如果 ...

  7. 设置虚拟机里的Centos7的IP

    输入ip查询命名 ip addr  也可以输入 ifconfig查看ip,但此命令会出现3个条目,centos的ip地址是ens33条目中的inet值. 发现 ens33 没有 inet 这个属性,那 ...

  8. 用dump为什么总会在前面出现/path/debug.php：193

    解决方案,在php.ini中的xdebug中加一行代码:xdebug.overload_var_dump=1

  9. oop 单例模式

  10. JAVA解析XML有哪几种方法？并简述各自的优缺点

    DOM: 是用与平台和语言无关的方式表示XML文档的官方W3C标准,分析该结构通常需要加载整个文档和构造层次结构,然后才能做任何工作.是基于信息层次的 优点有:由于树在内存中是持久的,因此可以修改它以 ...