jquery 图片弹出功能

最近在做项目，一个图片点击预览，即可放大查看的功能。如下：

 

首先，引入一个js插件：tinybox.js

其次，引入一个css样式：common.css

 

第三，代码展现部分：

 

<!-- 当点击地图上的机井点，选择里面图片预览的按钮，弹出框的样式设置 -->
<link rel="stylesheet" href="${ctx}/content/skin/css/common.css" type="text/css" />
<style type="text/css">
	#tinybox{position:absolute; display:none; padding:10px; background:#ffffff url(../image/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000;}
	#tinymask{position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000000; z-index:1500;}
	#tinycontent{background:#ffffff; font-size:1.1em;}
</style>
<!-- 引用弹出框的js -->
<script type="text/javascript" src="${ctx}/content/skin/js/tinybox.js"></script>

<a class='ml20' onclick='ShowPhotoInfo()'>预览</a>

//弹出图片
function ShowPhotoInfo(photoInfo) {
	// 获取到图片的地址
	var content2 = "<img width='640' height='466' src='http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=3&spn=0&di=154450809370&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1126541908%2C2603454962&os=3355752586%2C552577105&simid=4125984377%2C377518992&adpicid=0&ln=1786&fr=&fmq=1477191442941_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fi1.hexunimg.cn%2F2014-08-15%2F167580248.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fgjof_z%26e3Bijx7g_z%26e3Bv54AzdH3Fda89-ab-8cAzdH3F8m0cbad90_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0' />";
	// 将图片的信息以弹出框形式展现出来
	TINY.box.show(content2,0,0,0,1);
}

 

 

以上就是预览按钮点击后，弹出图片预览信息。非常好用的一个插件。
 

预览图：

 

更多精彩敬请关注公众号

Java极客思维

微信扫一扫，关注公众号