本实例用到了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 移除栈顶的控制器

    - (IBAction)back2Two:(id)sender { // 移除当前栈顶的控制器 [self.navigationController popViewControllerAnimated ...

  2. WCF的问题

    使用service调用WCF的时候,有时候会出现 其他信息: HTTP 无法注册 URL 进程不具有此命名空间的访问权限 这样的问题,这时候就需要进行如下尝试: 1,VS的管理权限使用管理员的权限. ...

  3. 使ListView控件中的选择项高亮显示

    实现效果: 知识运用: ListView控件的SelectedItems属性 //获取在ListView控件中被选中数据项的集合 public ListView.SelectedListViewIte ...

  4. FETCH - 用游标从查询中抓取行

    SYNOPSIS FETCH [ direction { FROM | IN } ] cursorname where direction can be empty or one of: NEXT P ...

  5. IIS6.0开启gzip压缩

    双击IIS服务器,右键点击网站,点击属性,然后点击服务,我们看到HTTP压缩,然后在压缩应用程序文件,压缩静态文件中打钩,然后点击确定,第一步就完成了   然后我们右键点击web服务扩展,点击添加一个 ...

  6. DOTA自走棋卡牌及搭配阵容

    这个游戏其实就根炉石jjc和A牌轮抽一样,前期要找着质量牌抓,保证你至少不漏.根据你的需求补一些你不会上场的阵容组件,最后根据你的组件和核心紫卡来哪张来决定打什么.另外也要考虑场上另外几家,如果有一家 ...

  7. linux的一些指令

    linux的一些指令 █查看指令參數man 指令,如:man ls ,按q鍵退出 █查看文件列表ls -lht 按時間排序ll 列表ls 列表 目錄cd 目錄名稱 進入路徑cd .. 返回上層路徑 █ ...

  8. css中让元素隐藏的多种方法

    { display: none; /* 不占据空间,无法点击 / } { visibility: hidden; / 占据空间,无法点击 / } { position: absolute; top: ...

  9. JavaScript获取时间戳与时间戳转化

    第一种方法(精确到秒): var timestamp1 = Date.parse( new Date()); 第二种方法(精确到毫秒): var timestamp2 = ( new Date()). ...

  10. 牛客小白月赛1 G あなたの蛙は旅⽴っています【图存储】【DP】

    题目链接:https://www.nowcoder.com/acm/contest/85/G 思路: DP 空间可以优化成一维的, 用一维数组的 0 号单元保存左斜对角的值即可. 存图这里真不好理解 ...