本文實例為大家分享了jquery實現圖片放大功能的具體實現代碼，供大家參考，具體內容如下
圖片放大功能類似于淘寶上的商品的查看，如果鼠標移動到小圖上就會在相應的位置顯示出大圖。如果自己寫這些代碼，會很痛苦。官方網站上提供了一個類庫――jquery.jqzoom.js；只需要引入次類庫，引用此類庫，添加一些css代碼即可實現此功能；
HTML框架如下：
<div class="jqzoom"> <img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/></div>
注意，img中必須有jqimg屬性，這個屬性放的是大圖的地址；
js代碼如下：
<script type="text/javascript"> $(function () { $(".jqzoom").jqueryzoom({ xzoom: 300, //放大圖的寬度（默認是200） yzoom: 300, //放大圖的高度（默認是200） offset: 10, //離原圖的距離（默認是10） position: "right", //放大圖的定位（默認是"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>以上就是本文的全部內容，希望對大家學習jquery程序設計有所幫助。
新聞熱點
疑難解答
