小さな画像にマウスを移動して大きな画像の効果を表示する JQuery メソッド

この記事の例では、JQuery を使用して小さな画像にマウスを移動し、大きな画像の効果を表示する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ここで大きな画像を表示する機能は、前回の記事「ハイパーリンクマウスプロンプト効果を実装するJQueryメソッド」と同じで、コードを少し変更することで画像プロンプト効果を作成することができます。

前のハイパーリンク プロンプト効果のコードを参照してください。作成する div 要素のコードを次のように変更するだけです:

//创建 div 元素 图片提示
var tooltip = "<div id="tooltip"><img src=""+ this.href +"" alt="预览图"><\/div>"; 
</div>

マウスを画像上でスライドさせると、ディスプレイに大きな画像プロンプト効果が表示されます。効果をより人間味のあるものにするために、画像に説明テキストを追加することも必要です。つまり、プロンプトが表示される大きな画像の下に、対応する画像の紹介テキストが表示されます。

ハイパーリンクの title 属性値に基づいて、画像の対応する紹介テキストを取得できます。JQuery コードは次のとおりです。

this.myTitle = this.title; 
this.title = "";  
var imgTitle = this.myTitle&#63; "<br />" + this.myTitle : "";

次に、次のコードを使用して div 要素に追加します。

// 创建 div 元素
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; 

this.myTitleが「」かどうかの判定には三項演算を使用します。 3 項演算の構造は次のとおりです: ブール値 1: 値 2。最初のパラメータはブール値である必要があります。もちろん、三項演算は「if(){ }else{ }」に置き換えることもできます。例:

var imgTitle; 
if (this.myTitle) { 
  imgTitle = "<br />" + this.myTitle; 
} else { 
  imgTitle = ""; 
}

このようにして、画像プロンプト効果が完成します。マウスを画像上でスライドさせると、画像の大きなプレビューが表示され、大きな画像の下に紹介文が表示されます。

この例の完全なコードは次のとおりです:

<script type="text/javascript">
//<![CDATA[
$(function(){
  var x = 10;
  var y = 20;
  $("a.tooltip").mouseover(function(e){
    this.myTitle = this.title;
    this.title = "";  
    var imgTitle = this.myTitle&#63; "<br/>" + this.myTitle : "";
    var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='预览图'/>"+imgTitle+"<\/div>";
    //创建 div 元素
    $("body").append(tooltip);
    //把它追加到文档中             
    $("#tooltip")
      .css({
        "top": (e.pageY+y) + "px",
        "left": (e.pageX+x) + "px"
      }).show("fast"); //设置x坐标和y坐标，并且显示
 }).mouseout(function(){
    this.title = this.myTitle;  
    $("#tooltip").remove(); //移除 
 }).mousemove(function(e){
    $("#tooltip")
      .css({
        "top": (e.pageY+y) + "px",
        "left": (e.pageX+x) + "px"
      });
  });
})
//]]>
</script>

この記事が皆さんの jQuery プログラミングに役立つことを願っています。