jquery 图片弹出功能

来源：互联网发布：松下pro7以太网端口编辑：程序博客网时间：2024/06/12 00:59

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

首先，引入一个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);}

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

预览图：

0 0