中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

這篇文章主要為大家詳細介紹了基于jquery實現圖片放大功能的相關資料，具有一定的參考價值，感興趣的朋友可以參考一下

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