基於jquery實現圖片放大功能_jquery-js教程-PHP中文網

基於jquery實現圖片放大功能_jquery

WBOY

發布： 2016-05-16 15:01:44

原創

1463 人瀏覽過

本文實例為大家分享了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程式設計有所幫助。