這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)圖片放大功能的相關(guān)資料，具有一定的參考價值，感興趣的朋友可以參考一下
本文實例為大家分享了jquery實現(xiàn)圖片放大功能的具體實現(xiàn)代碼，供大家參考，具體內(nèi)容如下
圖片放大功能類似于淘寶上的商品的查看，如果鼠標(biāo)移動到小圖上就會在相應(yīng)的位置顯示出大圖。如果自己寫這些代碼，會很痛苦。官方網(wǎng)站上提供了一個類庫——jquery.jqzoom.js；只需要引入次類庫，引用此類庫，添加一些css代碼即可實現(xiàn)此功能；
HTML框架如下：
<div>
<img src="images/pro_img/blue_one_small.jpg" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/>
</div>
注意，img中必須有jqimg屬性，這個屬性放的是大圖的地址；
js代碼如下：
<script type="text/javascript">
$(function () {
$(".jqzoom").jqueryzoom({
xzoom: 300, //放大圖的寬度（默認(rèn)是200）
yzoom: 300, //放大圖的高度（默認(rèn)是200）
offset: 10, //離原圖的距離（默認(rèn)是10）
position: "right", //放大圖的定位（默認(rèn)是"right"）
preload: 1
})
})
</script>
用法：$(".jqzoom").jqueryzoom
如果只添加這么多代碼效果會出來，但是不是那么的理想。為了更加美觀，必須添加如下的css代碼：
<style type="text/css">
.jqzoom{
border:1px solid #BBB;
float:left;
position:relative;
padding:0px;
cursor:pointer;
}
/*jQzoom*/
div.zoomdiv {
z-index: 999;
position : absolute;
top:0px;
left:0px;
width : 200px;
height : 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
}
div.jqZoomPup {
z-index : 999;
visibility : hidden;
position : absolute;
top:0px;
left:0px;
width : 50px;
height : 50px;
border: 1px solid #aaa;
background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}
</style>
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。