zoukankan      html  css  js  c++  java
  • jQuery点击图片弹出大图遮罩层

    jQuery点击图片弹出大图遮罩层

     

     

     

     

     

     

     

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图

    效果体验:
    http://hovertree.com/texiao/hovertreeshow/

    在 开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插 件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链 接:http://hovertree.com/top/htpro/5dbcb599663b3397.htm

    HoverTreeTop是一个ASP.NET开源项目,用于企业网站建设,里面也包含HoverTreeShow插件的源码,有需要的朋友可以下载源码:http://hovertree.com/h/bjaf/hv6cqe5n.htm

    弹出层后,可以点击右上角的 X 按钮关闭,也可以双击页面关闭层。

    代码如下:

    复制代码
    复制代码
    复制代码
    复制代码
    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>使用HoverTreeShow插件弹出图片大图层_何问起</title><base target="_blank" />
        <meta charset="utf-8" />
        <link href="http://hovertree.com/texiao/hovertreeshow/hovertreeshow.css" rel="stylesheet" />
        <script src="http://down.hovertree.com/jquery/jquery-1.12.1.min.js"></script>
        <style>#hovertreeshow{
        400px;height :400px;overflow:scroll;margin:5px auto;}
        #hovertreeshow img{max-height:100%;}
        #headhovertree{margin:5px auto;400px;}a{color:blue;}
        </style>
    </head>
    <body>
        <div id="headhovertree"><h3>使用HoverTreeShow插件弹出图片大图层</h3>
        请点击下方图片,将弹出遮罩层显示图片原图。<a href="http://hovertree.com/h/bjag/o46xlsnm.htm">说明</a> <a href="http://hovertree.com">首页</a></div>
        <div id="hovertreeshow" class="hovertreeshow">
            <img src='http://hovertree.com/hvtimg/bjafjd/hs6oi257.jpg' /><img src='http://hovertree.com/hvtimg/bjafjd/070joeh7.jpg' />
            <img src="http://hovertree.com/hvtimg/201512/o9qashmi.gif" />
        </div>
        <div style="height:600px;100%"></div>
        <script src="http://hovertree.com/texiao/hovertreeshow/hovertreeshow.js"></script>
    </body>
    </html>
    复制代码
    复制代码
    复制代码
    复制代码
    复制代码

    更多特效:http://www.cnblogs.com/jihua/p/webfront.html

  • 相关阅读:
    将node.js代码放到阿里云上,并启动提供外部接口供其访问
    Linux内核深度解析之内核互斥技术——读写信号量
    man 1 2 3 4...
    Android Sepolicy 相关工具
    selinux misc
    ext4 mount options
    tune2fs cmd(ext fs)
    /dev/tty node
    kernel misc
    fork & vfork
  • 原文地址:https://www.cnblogs.com/lianzhibin/p/6275449.html
Copyright © 2011-2022 走看看