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
转载于:https://www.cnblogs.com/chun6/p/6266948.html
jQuery点击图片弹出大图遮罩层相关推荐
- html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
- bootstrap 点击图片弹出大图
效果: 在一个table里显示很多的小图,每点击一个图片,显示一张大图. 小图的html <td><img height='120px' width='200px' src=&quo ...
- html基础总结4-实现点击图片弹出放大图片--不用插件
实现点击图片弹出放大图片--不用插件 <td width="350"> <img height="100" width="100&q ...
- html页面点击小图弹出大图代码,利用JS实现点击小图弹出大图代码
特效描述:利用JS实现 点击小图 弹出大图代码.利用JS实现点击小图弹出大图代码 代码结构 1. HTML代码 (function(){ var LightBox = function(options ...
- php 大图找小图,点击小图弹出大图,点击网页任何部分隐藏大图
点击小图弹出大图,点击网页任何部分隐藏大图 left: 0; right: 0; display:none; bottom: 0; background-color: #000; opacity: . ...
- HTML中弹窗中加入图片,javascript里怎么实现点击图片弹出对话框?
JavaScript中可以使用document.getElementsByTagName方法后去img标签,然后遍历所有img标签并为其添加点击事件实现点击弹出对话框. JavaScript实现点击图 ...
- html点击图片产生事件,javascript里怎么实现点击图片弹出对话框?
JavaScript中可以使用document.getElementsByTagName方法后去img标签,然后遍历所有img标签并为其添加点击事件实现点击弹出对话框. JavaScript实现点击图 ...
- 点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- html点击一个文字显示提示框,点击文字弹出一个DIV层窗口代码
点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; ...
最新文章
- IntPtr to bytes
- Windows DDK介绍,选择和安装
- 线性代数:第二章 矩阵及其运算
- linux常用命令记录
- Javascript中的async await
- 高效的企业测试-单元和用例测试(2/6)
- Qt工作笔记-QByteArray与自定义结构体之间的转化(可用于网络传输,以及数据回调)
- 前端市场现在是不是饱和了?
- Linux如何查看所有的用户和组信息
- Airbnb 面试题汇总
- python编译安装没有c扩展_python – 为什么我在安装simplejson时得到“C扩展无法编译”?...
- vscode是付费的吗_Vscode
- 解决win10cmd乱码
- 2021年软考时间合格标准证书领取等
- 怎么把PDF文件拆分,PDF拆分软件怎么操作
- JVM 1.8 永久代---元空间 的变动
- 4k显示器如何解决分辨率,和桌面图标与应用程序界面,显示太小的问题
- MSRA-TD500数据集坐标转换
- 面试如演戏,通关靠演技
- How to prevent object bloat in PostgreSQL
热门文章
- linuc和python常用命令是一样的么_linuc和python常用命令是一样的么_python教程3--《linux常用命令》...
- java office web apps_应用程序与 Office Web Apps 整合
- each 数据获取attr_Python数据分析 — 基于RFM的精细化用户分层
- 我的世界手机版javaui材质包_传奇世界中变版手机版下载-传奇世界中变版手机版最新下载...
- git统计当前项目代码行数
- ie检查服务器证书吊销,浏览器弹出“该站点安全证书吊销信息不可用是否继续”解决方法...
- Android 8.0 linux内核,在Ubuntu上为Android增加硬件抽象层(HAL)模块访问Linux内核驱动程序---Android8.0版本实现-对照老罗版本...
- 北京交通大学计算机学院篮球,院际杯篮球赛|男篮小组赛第四轮战报
- linux rpm安装zabbix,CentOS 7上安装Zabbix Server 3.0 图文详解
- java打印正三角形_java实现打印正三角的方法