jQuery カスタム虫眼鏡効果

この記事の例では、jQueryのカスタム虫眼鏡効果の具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

jQuery プラグインの定義:

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <script src="js/jquery3.6.0.js"></script>
  <スタイル タイプ="text/css">
   div{
    幅: 200ピクセル;
    高さ: 200px;
   }
  </スタイル>
 </head>
 <本文>
  <div></div>
  <div></div>
  <スクリプト>
   // 1. jQuery.fn に基づいて定義された jQuery プラグイン // 2. 名前の競合解決 // 3. jQuery オブジェクト内の各要素をループする // 4. 関数内で、jQuery (this) を返す
   
   (関数($){
    $.fn.extend({
     ランダムカラー:関数(){
      // これは、$selector 関数で選択したすべての要素で構成される疑似配列を参照します。random(){
       var r = Math.floor(Math.random()*256);
       var g = Math.floor(Math.random()*256);
       var b = Math.floor(Math.random()*256);
       
       'rgb('+ r +','+ g +','+ b +')' を返します。
      }
      this.each(関数(インデックス){
       $(これ).css({
        背景色:ランダム()
       })
      })
      これを返します。
     }
    })
   })(jQuery);
   div 要素の値をランダムに選択します。
  </スクリプト>
 </本文>
</html>

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  
  <スタイル タイプ="text/css">
   *{
    マージン: 0;
    パディング: 0;
   }
   .拡大鏡 .左{
    幅: 240ピクセル;
    高さ: 150px;
    フロート: 左;
    位置: 相対的;
   }
   .拡大鏡 .左画像{
    幅: 240ピクセル;
    高さ: 150px;
   }
   .拡大鏡 .左 .マスク{
    幅: 100%;
    高さ: 100%;
    位置: 絶対;
    左: 0;
    上: 0;
    背景色: 黒;
    不透明度: 0.4;
   }
   .拡大鏡 .フロート{
    幅: 50px;
    高さ: 50px;
    背景: ホットピンク;
    不透明度: 0.5;
    位置: 絶対;
    左: 0;
    上: 0;
   }
   .拡大鏡 .右{
    高さ: 200px;
    幅: 200ピクセル;
    背景画像: url(img/2.jpg) ;
    フロート: 左;
    左マージン: 50px;
   }
  </スタイル>
 </head>
 <本文>
  
  <div class="拡大鏡">
   <div class="left">
    <img src="./img/2.jpg" >
    <div class="float">
     
    </div>
    <div class="mask"></div>
   </div>
   <div class="right"></div>
  </div>
  <script src="js/jquery3.6.0.js"></script>
  <スクリプト>
   (関数($){
    $.fn.extend({
     拡大鏡:関数(){
      this.each(関数(){
       var _this_ は、次のようになります。
       $('.left',this).mousemove(関数(evt){
        var x = evt.offsetX;
        var y = evt.offsetY;
        var float=$('.float',this);
        
        x = x-float.width/2;
        y = y-float.height / 2;
        
        x<0の場合{
         0 の場合
        }
        y<0の場合{
         y=0;
        }
        if(x > $(this).width()-float.width()){
         x = $(this).width()-float.width();
        }
        if(y > $(this).height()-float.height()){
         y = $(this).height()-float.height();
        }
        フロート.css({
         左:x,
         トップ:y
        });
        $('.right',その).css({
         背景位置:x*-4+'px' + y*-4+'px'
        })
       }).mouseover(関数(){
        
       }).mouseout(関数(){
        
       })
      });
     }
    })
   })(jQuery)
   拡大鏡
  </スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: