JQuery method to move the mouse to a small image to display the effect of a large image_jquery

The example in this article describes how to use JQuery to move the mouse to a small image to display the effect of a large image. Share it with everyone for your reference. The specific analysis is as follows:

The function of displaying a large picture here is similar to the previous article "JQuery method to implement hyperlink mouse prompt effect". By slightly modifying the code, you can create a picture prompt effect.

Refer to the code for the previous hyperlink prompt effect, you only need to change the code of the created div element to:

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

When the mouse slides over the picture, the display will have a large picture prompt effect. In order to make the effect more humane, it is also necessary to add description text to the picture, that is, the corresponding introduction text of the picture appears below the large picture that is prompted.

You can get the corresponding introduction text of the image based on the title attribute value of the hyperlink. The JQuery code is as follows:

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

Then append it to the div element with the following code:

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

When judging whether this.myTitle is "", ternary operation is used. The ternary operation structure is: Boolean? Value 1: Value 2. Its first parameter must be a Boolean value. Of course, ternary operations can also be replaced by "if(){ }else{ }", for example:

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

In this way, the picture prompt effect is completed. When the mouse slides over the picture, a large preview of the picture will appear, and there will be introduction text below the big picture.

The complete code for this example is as follows:

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

I hope this article will be helpful to everyone’s jQuery programming.