jquery插件實現(xiàn)鼠標(biāo)經(jīng)過圖片右側(cè)顯示大圖的效果(類似淘寶)
更新時間：2013年02月04日 14:51:58 作者：
分享一個jquery插件:實現(xiàn)類似淘寶上鼠標(biāo)經(jīng)過圖片右側(cè)顯示大圖的效果,感興趣的朋友可以研究下，或許對你學(xué)習(xí)jquery有所幫助,千萬不要錯過啊
這個插件的名字elevatezoom，網(wǎng)址為http://www.elevateweb.co.uk/image-zoom，在github上的項目首頁為https://github.com/elevateweb/elevatezoom，建議去github下載，這個網(wǎng)速比較快。
實現(xiàn)這個效果你需要準(zhǔn)備兩張圖片，一張小的，一張大用于鼠標(biāo)經(jīng)過時候顯示。然后我們只要為img標(biāo)簽添加data-zoom-image屬性，其值為大圖的地址，最后在javascript中選擇該圖片調(diào)用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 >http://www.elevateweb.co.uk/image-zoom/examples</a>
<script>
$('#zoom_01').elevateZoom();
</script>
</body>
</html>
實現(xiàn)的效果如下：
具體代碼沒有研究，只是知道怎么使用了，特在此分享一下。
實現(xiàn)這個效果你需要準(zhǔn)備兩張圖片，一張小的，一張大用于鼠標(biāo)經(jīng)過時候顯示。然后我們只要為img標(biāo)簽添加data-zoom-image屬性，其值為大圖的地址，最后在javascript中選擇該圖片調(diào)用elevateZoom()就可以了。
下面給出一個例子(在github下載的代碼中有這個例子)：
復(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>
實現(xiàn)的效果如下：
具體代碼沒有研究，只是知道怎么使用了，特在此分享一下。
您可能感興趣的文章:
- JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向
- jquery實現(xiàn)的提示浮層跟隨鼠標(biāo)移動
- Jquery實現(xiàn)鼠標(biāo)移動放大圖片功能實例
- jQuery實現(xiàn)div跟隨鼠標(biāo)移動
- jQuery實現(xiàn)鼠標(biāo)滑過圖片移動特效
- jQuery 網(wǎng)易相冊鼠標(biāo)移動顯示隱藏效果實現(xiàn)代碼
- Jquery創(chuàng)建層顯示標(biāo)題和內(nèi)容且隨鼠標(biāo)移動而移動
- JQuery實現(xiàn)鼠標(biāo)移動圖片顯示描述層的方法
- jQuery鼠標(biāo)移動圖片上實現(xiàn)放大效果
- jQuery插件jFade實現(xiàn)鼠標(biāo)經(jīng)過的圖片高亮其它變暗
- jQuery實現(xiàn)的響應(yīng)鼠標(biāo)移動方向插件用法示例【附源碼下載】
相關(guān)文章
jQuery ui 利用 datepicker插件實現(xiàn)開始日期(minDate)和結(jié)束日期(maxDate)
這篇文章主要介紹了jQuery ui 利用 datepicker插件實現(xiàn)開始日期(minDate)和結(jié)束日期(maxDate),需要的朋友可以參考下2014-05-05
JQuery選擇器之六 測試代碼如下2009-07-07
jQuery圖片輪播（二）利用構(gòu)造函數(shù)和原型創(chuàng)建對象以實現(xiàn)繼承
本文主要介紹了利用構(gòu)造函數(shù)和原型創(chuàng)建對象以實現(xiàn)繼承，并附上完成簡單輪播對象的封裝的示例代碼。有興趣的朋友可以看下2016-12-12
jQuery插件開發(fā)精品教程讓你的jQuery提升一個臺階
這篇文章主要介紹了jQuery插件開發(fā)精品教程讓你的jQuery提升一個臺階 的相關(guān)資料,需要的朋友可以參考下2016-01-01
Select下拉框的問題，想在選擇一個選項后，前臺顯示做出變動，并且知道選擇的是第幾個選項。怎么解決這個問題呢？下面小編給大家分享SelecT下拉框選中和取值的解決方法，需要的朋友參考下吧2016-11-11
這篇文章主要介紹了HTML頁面如何彈出居中可拖拽的自定義窗口層,需要的朋友可以參考下2014-05-05
jQuery 實現(xiàn)側(cè)邊浮動導(dǎo)航菜單效果
這篇文章主要介紹了jQuery 實現(xiàn)側(cè)邊浮動導(dǎo)航菜單效果,需要的朋友可以參考下2014-12-12
jQuery確實是一項偉大的技術(shù)，通過jQuery的插件，我們可以方便的創(chuàng)建具有更好用戶界面的網(wǎng)站。在本文中，將和大家分享40個對你創(chuàng)建更好用戶界面的jQuery技術(shù)和教程。2011-01-01
jquery UI Datepicker時間控件沖突問題解決
這篇文章主要介紹了jquery UI Datepicker時間控件沖突問題的解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了jQuery實現(xiàn)DIV層淡入淡出拖動特效的方法,涉及jQuery針對鼠標(biāo)操作的常用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02