首頁 > web前端 > js教程 > 主體

jquery外掛程式實現滑鼠經過圖片右側顯示大圖的效果(類似淘寶)_jquery

WBOY
發布: 2016-05-16 17:42:24
原創
988 人瀏覽過

這個外掛的名字elevatezoom,網址為http://www.elevateweb.co.uk/image-zoom,在github上的項目首頁為https://github.com/elevateweb/elevatezoom,建議去github下載,這個網速比較快。

實現這個效果你需要準備兩張圖片,一張小的,一張大用於滑鼠經過時候顯示。然後我們只要為img標籤新增data-zoom-image屬性,其值為大圖的位址,最後在javascript中選擇該圖片呼叫elevateZoom()就可以了。

下面給一個例子(在github下載的程式碼中有這個範例):

複製程式碼 程式碼如下:





jQuery elevateZoom Demo

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板