当前位置: 要听舞曲DJ网 MUSIC > DIVCSS教程 > jQuery点击图片弹出大图遮罩层
250*250广告位

jQuery点击图片弹出大图遮罩层

日期:2017-04-03 来源:要听舞曲DJ网 MUSIC 浏览:

使用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>


上一篇:jQuery图片自动添加水印插件

下一篇:纯css3圆形从中心向四周扩散动画效果

  • 售前咨询
  • 网站建设
  • 网站优化
  • 整合营销
  • 售后服务