jquery_jqueryをベースにした画像拡大機能の実装-jsチュートリアル-php.cn

jquery_jqueryをベースにした画像拡大機能の実装

WBOY

リリース： 2016-05-16 15:01:44

オリジナル

1463 人が閲覧しました

この記事の例では、参考のために画像拡大機能を実装するための jquery の具体的な実装コードを共有します。具体的な内容は次のとおりです。

画像拡大機能は、淘宝網で商品を表示するのと似ています。小さい画像の上にマウスを移動すると、対応する位置に大きい画像が表示されます。このコードを自分で書くのは大変でしょう。クラスライブラリ - jquery.jqzoom.js が公式 Web サイトで提供されています。この機能を実現するには、サブクラスライブラリを導入し、このクラスライブラリを参照し、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 プログラミングを学習する皆さんのお役に立てれば幸いです。