DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery插件實現鼠標經過圖片右側顯示大圖的效果(類似淘寶)
jquery插件實現鼠標經過圖片右側顯示大圖的效果(類似淘寶)
編輯：JQuery特效代碼
這個插件的名字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>
實現的效果如下：
具體代碼沒有研究，只是知道怎麼使用了，特在此分享一下。
實現這個效果你需要准備兩張圖片，一張小的，一張大用於鼠標經過時候顯示。然後我們只要為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>
實現的效果如下：
具體代碼沒有研究，只是知道怎麼使用了，特在此分享一下。
小編推薦
熱門推薦