Laksanakan fungsi pembesaran imej berdasarkan jquery_jquery

Contoh dalam artikel ini berkongsi dengan anda kod pelaksanaan khusus jquery untuk melaksanakan fungsi pembesaran imej untuk rujukan anda. Kandungan khusus adalah seperti berikut

Fungsi pembesaran imej adalah serupa dengan melihat produk pada Taobao Jika tetikus digerakkan ke atas imej kecil, imej besar akan dipaparkan pada kedudukan yang sepadan. Ia akan menjadi sakit untuk menulis kod ini sendiri. Perpustakaan kelas - jquery.jqzoom.js disediakan di tapak web rasmi anda hanya perlu memperkenalkan perpustakaan subkelas, merujuk perpustakaan kelas ini dan menambah beberapa kod css untuk mencapai fungsi ini; Rangka kerja HTML adalah seperti berikut:

<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>

Perhatikan bahawa

img mesti mempunyai atribut jqimg Atribut ini memegang alamat imej besar; Kod js adalah seperti berikut:

<script type="text/javascript">
    $(function () {
      $(".jqzoom").jqueryzoom({
        xzoom: 300,   //放大图的宽度（默认是200）
        yzoom: 300,   //放大图的高度（默认是200）
        offset: 10,   //离原图的距离（默认是10）
        position: "right",   //放大图的定位（默认是"right"）
        preload: 1
      })
    })
  </script>

Penggunaan:

$(".jqzoom").jqueryzoom Jika anda hanya menambah kod sebanyak ini, kesannya akan keluar, tetapi ia tidak begitu ideal. Untuk menjadi lebih cantik, kod css berikut mesti ditambah:

<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>

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan jquery.