使用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点击图片弹出大图遮罩层的更多相关文章

  1. jQuery点击图片弹出放大可拖动图片查看

    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...

  2. jQuery点击图片弹出放大特效下载

    效果体验:http://hovertree.com/texiao/jqimg/1/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  3. jquery 点击图片弹出遮罩层查看大图

    <div class="photobox"> <ul> <li data-date="'+data[i].id+'"> &l ...

  4. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

  5. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  6. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)

    <img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> & ...

  9. 根据juery CSS点击一个标签弹出一个遮罩层的简单示例

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. Gradle – Spring 4 MVC Hello World Example

    In this tutorial, we will show you a Gradle + Spring 4 MVC, Hello World Example (JSP view), XML conf ...

  2. Spring EL Lists, Maps example

    In this article, we show you how to use Spring EL to get value from Map and List. Actually, the way ...

  3. Linux上svn服务器的搭建

    安装svn服务器 直接用yum安装,命令如下: #yum install -y subversion 验证是否安装成功. #svnserve --version 创建SVN版本库 在home目录下创建 ...

  4. 任务分发系统gearman

    1 Gearman是什么 Gearman Job Server@http://gearman.org/. Gearman 是一个任务分发系统,它提供了一个分发框架,能够分发某类任务到更适合处理这类任务 ...

  5. JEECMS-自定义标签[list]

    1.自定义标签类 import static cn.com.yhxl.common.web.freemarker.DirectiveUtils.OUT_LIST; import static free ...

  6. 应用完全启动后, Spring执行自定义初始化

    项目中做敏感词过滤, 因为前台ajax校验要走service ,而后台统一过滤器要走interceptor , 所以把检查器提到一个工具类(HeXieWordFinder)里 这个工具类理应缓存数据库 ...

  7. 我的VisualStudio工具箱

    代码神器 ReSharper 毫无疑问,我认为R#是目前VS插件中有史以来最强大的,各种快捷生成代码的方式, 代码重构, 很多很多的快捷键支持.相比较原生VS的,VS的智能功能简直弱爆了. dimec ...

  8. ADO.NET 快速入门（十一）：连接池

    这个示例演示了如何构建一个到数据源的连接池.你可以通过连接池部署高性能的应用程序.本例中使用连接串创建连接池,并且由 SqlConnection 自动管理.   string connString; ...

  9. 添加MIME类型

    #查看站点test01下所有的MIME类型: Get-WebConfiguration -PSPath MACHINE/WEBROOT/APPHOST/test01 -Filter system.we ...

  10. BZOJ 2748: [HAOI2012]音量调节 dp

    2748: [HAOI2012]音量调节 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...