jquery插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片右側(cè)顯示大圖的效果(類似淘寶)

2019-11-20 23:00:37

字體：大中小

供稿：網(wǎng)友

這個(gè)插件的名字elevatezoom，網(wǎng)址為http://www.elevateweb.co.uk/image-zoom，在github上的項(xiàng)目首頁(yè)為https://github.com/elevateweb/elevatezoom，建議去github下載，這個(gè)網(wǎng)速比較快。

實(shí)現(xiàn)這個(gè)效果你需要準(zhǔn)備兩張圖片，一張小的，一張大用于鼠標(biāo)經(jīng)過時(shí)候顯示。然后我們只要為img標(biāo)簽添加data-zoom-image屬性，其值為大圖的地址，最后在javascript中選擇該圖片調(diào)用elevateZoom()就可以了。

下面給出一個(gè)例子(在github下載的代碼中有這個(gè)例子)：

復(fù)制代碼代碼如下:

 
<!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 >http://www.elevateweb.co.uk/image-zoom/examples</a> 
<script> 
$('#zoom_01').elevateZoom(); 
</script> 
</body> 
</html> 