首頁 > 開發者 > JavaScript
這個外掛程式的名字elevatezoom，網址為http://www.elevateweb.co.uk/image-zoom，在github上的項目首頁為https://github.com/elevateweb/elevatezoom，建議去github下載，這個網速比較快。
實現這個效果你需要準備兩張圖片，一張小的，一張大用於滑鼠經過時候顯示。然後我們只要為img標籤添加data-zoom-image屬性，其值為大圖的地址，最後在javascript中選擇該圖片調用elevateZoom()就可以了。
下面給出一個例子(在github下載的代碼中有這個例子)：
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevateZoom-2.3.0.min.js'></script>
</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
<br />
see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a>
<script>
$('#zoom_01').elevateZoom();
</script>
</body>
</html>
實現的效果如下：
具體代碼沒有研究，只是知道怎麼使用了，特在此分享一下。
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
