jquery插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片右側(cè)顯示大圖的效果(類似淘寶)
更新時間：2013年02月04日 14:51:58 作者：
分享一個jquery插件:實(shí)現(xiàn)類似淘寶上鼠標(biāo)經(jīng)過圖片右側(cè)顯示大圖的效果,感興趣的朋友可以研究下，或許對你學(xué)習(xí)jquery有所幫助,千萬不要錯過啊
這個插件的名字elevatezoom，網(wǎng)址為http://www.elevateweb.co.uk/image-zoom，在github上的項(xiàng)目首頁為https://github.com/elevateweb/elevatezoom，建議去github下載，這個網(wǎng)速比較快。
實(shí)現(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>
實(shí)現(xiàn)的效果如下：
具體代碼沒有研究，只是知道怎么使用了，特在此分享一下。
實(shí)現(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>
實(shí)現(xiàn)的效果如下：
具體代碼沒有研究，只是知道怎么使用了，特在此分享一下。
您可能感興趣的文章:
- JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向
- jquery實(shí)現(xiàn)的提示浮層跟隨鼠標(biāo)移動
- Jquery實(shí)現(xiàn)鼠標(biāo)移動放大圖片功能實(shí)例
- jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過圖片移動特效
- jQuery 網(wǎng)易相冊鼠標(biāo)移動顯示隱藏效果實(shí)現(xiàn)代碼
- Jquery創(chuàng)建層顯示標(biāo)題和內(nèi)容且隨鼠標(biāo)移動而移動
- JQuery實(shí)現(xiàn)鼠標(biāo)移動圖片顯示描述層的方法
- jQuery鼠標(biāo)移動圖片上實(shí)現(xiàn)放大效果
- jQuery插件jFade實(shí)現(xiàn)鼠標(biāo)經(jīng)過的圖片高亮其它變暗
- jQuery實(shí)現(xiàn)的響應(yīng)鼠標(biāo)移動方向插件用法示例【附源碼下載】
相關(guān)文章
原生JS和jQuery版實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了HTML5中用js、jQuery結(jié)合Ajax實(shí)現(xiàn)文件上傳功能，HTML5中已經(jīng)可以用Ajax上傳文件了，而且代碼簡單，借助 FormData類即可發(fā)送文件數(shù)據(jù)，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了jquery實(shí)現(xiàn)文本框的文本自動補(bǔ)全效果,大家參考使用吧2014-01-01
基于JQuery實(shí)現(xiàn)異步刷新的代碼(轉(zhuǎn)載)
JQuery，是輕量級的js庫,把繁瑣的js代碼封裝，使調(diào)用更簡單，完成更多功能。同樣，封裝了js利用XMLHttpRequest實(shí)現(xiàn)的異步刷新.2011-03-03
發(fā)微博功能描述:當(dāng)點(diǎn)擊輸入框時，提示的文字會去掉；當(dāng)光標(biāo)離開時，如果沒有輸入任何內(nèi)容，提示的文字會恢復(fù),需要的朋友可以參考下2014-04-04
使用jquery的朋友對其中的on方法并不陌生吧，下面為大家介紹下此方法的具體使用，感興趣的朋友可以參考下2013-12-12
jQuery EasyUI中對表格進(jìn)行編輯的實(shí)現(xiàn)代碼
對表格進(jìn)行增刪改后一次性保存或回滾的發(fā)生相當(dāng)有用。參照官方的教程例子做了個用戶管理的小例子。2010-06-06
jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
了解jQuery技巧來提高你的代碼（個人覺得那個jquery的手冊很不錯）
這個jQuery選擇器實(shí)驗(yàn)室非常酷，它能在線免費(fèi)使用，當(dāng)然你也能下來到本地離線使用。這個測試頁面包含復(fù)雜的HTML組合字段，然后你能嘗試預(yù)定義使用各種jQuery選擇器。如果這還不夠你也可以自定義選擇器2012-02-02![自定義一個jquery插件[鼠標(biāo)懸浮時候 出現(xiàn)說明label]](http://img.jbzj.com/images/xgimg/bcimg8.png)
自定義一個jquery插件[鼠標(biāo)懸浮時候 出現(xiàn)說明label]
自定義一個jquery插件，一個簡單的jquery.js,入門的jquery插件，jquery入門實(shí)例,jquery helloworld。2011-06-06
這篇文章主要介紹了基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效，使用非組件方法來實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01