標籤：ges utf-8 meta http 目的 開發 etop css styles
使用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
jQuery點擊圖片彈出大圖遮罩層
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
