使用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. How to include JavaScript file in JSF

    In JSF 2.0, you can use <h:outputScript /> tag to render a HTML "script" element, an ...

  2. STM32的GPIO使用的函数剖析

    转载http://blog.csdn.net/wuwuhuizheyisheng/article/details/8239599 STM32的GPIO总结 作者:JCY 该文是自己学习了一段STM32 ...

  3. codeforces 630B Moore's Law

    B. Moore's Law time limit per test 0.5 seconds memory limit per test 64 megabytes input standard inp ...

  4. TQ210裸机编程(4)——按键（中断法）

    S5PV210有4个向量中断控制器(VIC),每个向量中断控制器包含32个中断源. 当某个中断源产生中断时,CPU会自动的将VICxVECTADDRy(x=0,1,2,3,y=0-31)寄存器的值赋给 ...

  5. 开源 免费 java CMS - FreeCMS1.5-信息管理

    下载地址:http://code.google.com/p/freecms/ 信息管理 1. 快速添加 从左侧管理菜单点击快速添加进入. 输入相关属性后添加“保存”按钮即可. 从FreeCMS 1.4 ...

  6. Unity3D音乐音效学习笔记

    对于Unity3D的音乐音效这块一直没有好好的看过,现在准备好好的研究一下,并作为一个笔记记录下. 支持格式 在游戏中,一般存在两种音乐,一种是时间较长的背景音乐,一种是时间较短的音效(比如按钮点击, ...

  7. Mac使用指南

    1.csrutil命令 简单来说 是苹果在新系统后加入的一个安全机制. Rootless讨论的前提是假定root账户是OS X(或者其他Unix系统)中对抗恶意程序保护操作系统的最后一道防线.意思是一 ...

  8. 腾讯云centos6.5下部署django环境

    基于腾讯云CentOS6.5的环境 首先说下需要用到的软件 1.gcc环境 腾讯云默认是没有gcc编译器的,需要手动安装一下:yum install gcc 2.python环境 因为我用的cento ...

  9. 【M20】协助完成“返回值优化（RVO）”

    1.方法返回对象,会导致临时对象的产生,这降低了效率,const Rational operator* (const Rational& lhs,Rational& rhs).有没有什 ...

  10. 2015南阳CCPC E - Ba Gua Zhen 高斯消元 xor最大

    Ba Gua Zhen Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 无 Description During the Three-Kingdom perio ...