使用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. inline（内联函数）

    一般来说,调用函数会造成:目前的指令位置被存储下来,程序流跳转到所调用的函数,然后执行调用函数,最后跳转回之前存储的位置.对于需要常常调用的小函数来说,这会影响程序的运行效率.所以,c99新增了inl ...

  2. ADUM1201在隔离RS232中的应用 【瓦特芯收藏】

    ADUM1201在隔离RS232中的应用 引言: RS-232是PC机与工业通信中应用最广泛的一种串行接口.RS-232接口最初是由美国EIA(电子工业联合会)规定的用于计算机与终端设备之间通讯的一种 ...

  3. codeforces 337D 树形DP Book of Evil

    原题直通车:codeforces 337D Book of Evil 题意:一棵n个结点的树上可能存在一个Evil,Evil危险范围为d,即当某个点与它的距离x<=d时,那么x是危险的. 现已知 ...

  4. AxWindowsMediaPlayer创建、添加播放列表（C#）

    // 创见打开对话框对象实例            OpenFileDialog openFileDialog = new OpenFileDialog(); //设置为可以打开多个文件        ...

  5. C#学习笔记（七）：智能编译器

    自动实现属性 C#提供的set/get可以让我们很方便的使用属性,但是某些情况下书写还是稍微麻烦了点,如下: public class Test { private string _name; pub ...

  6. iOS开发笔记系列-基础5(分类和协议)

    分类 在Objective-C中,除了通过新建子类的方式来向类添加新方法外,还可以通过分类的方式.分类提供了一种简单的方式,将类的定义模块化到相关方法的组或分类中,它还提供了扩展现有类定义的简便方式, ...

  7. 【剑指offer】近期公共祖先

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/28113959 剑指offer上的最后一题了,一个递归函数调了一下午,才得到正确的结果. 题 ...

  8. 教你使用Android SDK布局优化工具layoutopt

    创建好看的Android布局是个不小的挑战,当你花了数小时调整好它们适应多种设备后,你通常不想再重新调整,但笨重的嵌套布局效率往往非常低下,幸运的是,在Android SDK中有一个工具可以帮助你优化 ...

  9. Windows 7旗舰版搭建andriod 4.0开发环境记录

    搭建Android环境步骤(仅供参考): 官方搭建步骤: http://developer.android.com/index.html 搭建环境之前需要下载下面几个文件包: 一.安装Java运行环境 ...

  10. MySQL 行子查询(转)

    MySQL 行子查询 行子查询是指子查询返回的结果集是一行 N 列,该子查询的结果通常是对表的某行数据进行查询而返回的结果集. 一个行子查询的例子如下: SELECT * FROM table1 WH ...