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