最近在做專案，一個圖片點選預覽，即可放大檢視的功能。如下：

第三，程式碼展現部分：

<!-- 當點選地圖上的機井點，選擇裡面圖片預覽的按鈕，彈出框的樣式設定 -->
<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);
}
 

預覽圖：