使用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. BNU 51276 - 道路修建 Small (并查集)

    题目链接:http://www.bnuoj.com/v3/problem_show.php?pid=51276 具体题意不描述了,一眼看过去就是并查集,关键是添加边以后更新答案.我是开个二维的数组an ...

  2. 乐观锁--CAS

    悲观锁与乐观锁的区别 悲观锁会把整个对象加锁占为已有后才去做操作,Java中的Synchronized属于悲观锁.悲观锁有一个明显的缺点就是:它不管数据存不存在竞争都加锁,随着并发量增加,且如果锁的时 ...

  3. spring mvc 详细执行流程

    名词解释 DispatcherServlet:整个spring MVC的前端控制器,由它来接管来自客户端的请求. HandlerMapping:DispatcherServlet会通过它来处理客户端请 ...

  4. 学习php 韩顺平

    1.动态语言的发展史 最早使用cgi 学习 apache  全世界最流行的web服务器 php运行流程 → apache→php文件→数据库→php文件→浏览器 php底层语言是c语言 jsp底层语言 ...

  5. 从最简单的HelloWorld理解MVP模式

    版权声明:本文为博主原创文章,转载请注明出处:http://www.cnblogs.com/joy99/p/6116855.html 大多数编程语言相关的学习书籍,都会以hello,world这个典型 ...

  6. Wifi热点工具-青青草原WiFi

    有时只有有线网络,但手机需要上网,这时需要将笔记本作为无线热点. 青青草原WiFi,这个工具用起来挺方便,http://www.22zy.net/.

  7. nrpe 在ubuntu上安装遇到的问题

    Nagios Linux客户端需要安装NRPE进行数据收集,如果在Ubuntu系统下安装过程中遇到下面的错误提示:checking for SSL libraries... configure: er ...

  8. ADO.NET 快速入门（十五）：ADO 应用转换为 ADO.NET

    这是一个已经移植到 .NET 的 ADO 应用的例子.也演示了单向.只读.快速 DataReader 的使用.它演示如何使用 DataView 类从 DataSet 获取一个 Table 和 操作一个 ...

  9. Android，iOS，浏览器打开手机QQ与指定用户聊天界面

    在浏览器中可以通过JS代码打开QQ并弹出聊天界面,一般作为客服QQ使用.而在移动端腾讯貌似没有公布提供类似API,但是却可以使用schema模式来启动手机QQ. 以下为具体代码: 浏览器(包括手机浏览 ...

  10. DuiLib（三）——控件消息

    上一篇讲了控件创建,这篇说说控件消息.directui的中心思想是在真实窗口之上画出所有控件,那这些控件是如何获取各自消息的? 通过第一篇的示例可以看到窗口消息的传递过程: CWindowWnd::_ ...