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

Posted LD_Joy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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{
    width:400px;height :400px;overflow:scroll;margin:5px auto;}
    #hovertreeshow img{max-height:100%;}
    #headhovertree{margin:5px auto;width: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;width:100%"></div>
    <script src="http://hovertree.com/texiao/hovertreeshow/hovertreeshow.js"></script>
</body>
</html>
复制代码
复制代码
复制代码
复制代码

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

以上是关于jQuery点击图片弹出大图遮罩层的主要内容,如果未能解决你的问题,请参考以下文章

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

jquery遮罩层遮挡不住图片是怎么回事,弹出层,网页背景透明那块,文字什么的都可以遮住

js弹出div并显示遮罩层

jquery 点击标题弹出内容和遮罩层后,点击关闭按钮怎么关闭

html5如何实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框

点击弹出居中带有透明遮罩层窗口: