Méthode JQuery pour déplacer la souris sur une petite image pour afficher l'effet d'une grande image_jquery

L'exemple de cet article décrit comment utiliser JQuery pour déplacer la souris sur une petite image afin d'afficher l'effet d'une grande image. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

La fonction d'affichage d'une grande image ici est similaire à l'article précédent "Méthode JQuery pour implémenter l'effet d'invite de souris de lien hypertexte". En modifiant légèrement le code, vous pouvez créer un effet d'invite d'image.

Référez-vous au code de l'effet d'invite de lien hypertexte précédent, il vous suffit de modifier le code de l'élément div créé en :

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

Lorsque la souris glisse sur l'image, l'écran aura un effet d'invite de grande image. Afin de rendre l'effet plus humain, il est également nécessaire d'ajouter un texte de description à l'image, c'est-à-dire que le texte d'introduction correspondant de l'image apparaît sous la grande image demandée.

Vous pouvez obtenir le texte d'introduction correspondant de l'image en fonction de la valeur de l'attribut titre du lien hypertexte. Le code JQuery est le suivant :

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

Puis ajoutez-le à l'élément div avec le code suivant :

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

Pour juger si this.myTitle est "", une opération ternaire est utilisée. La structure de l'opération ternaire est : Booléen ? Valeur 1 : Valeur 2. Son premier paramètre doit être une valeur booléenne. Bien entendu, les opérations ternaires peuvent également être remplacées par "if(){ }else{ }", par exemple :

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

De cette façon, l'effet d'invite d'image est terminé. Lorsque la souris glisse sur l'image, un grand aperçu de l'image apparaîtra et il y aura un texte d'introduction sous la grande image.

Le code complet de cet exemple est le suivant :

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

J'espère que cet article sera utile à la programmation jQuery de chacun.