jquery mouse move to small figure shows the method of large graph effect _jquery

The example of this article describes the method of jquery mouse moving to a small image to show the effect of large images. Share to everyone for your reference. The specific analysis is as follows:

Here the display large image features similar to a "jquery implementation of Hyperlink mouse effect method", a little change in code, you can make a picture of the hint effect.

To refer to the preceding hyperlink hint effect code, simply change the code for the DIV element you created to:

Create a DIV element picture hint
var tooltip = "<div id=" tooltip "><\/div>"; 
   </div>

When the mouse is over the picture, the display will have a large picture hint effect. In order to make the effect more humane, but also need to add text for the picture, that is, the hint out of the big picture below the corresponding description of the text.

You can get the corresponding introductory text for the picture based on the title attribute value of the hyperlink, and the jquery code is as follows:

This.mytitle = This.title; 
This.title = "";  
var imgtitle = This.mytitle? "<br/>" + this.mytitle: "";

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

Create DIV element
var tooltip = "<div id= ' tooltip ' > "; 

In determining whether This.mytitle is "", the ternary operation is used. Ternary operation structure is: Boolean? Value 1: Value 2. Its 1th argument must be a Boolean value. Of course, ternary operations can also be replaced with "if () {}else{}", for example:

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

In this way, the picture prompts the effect is complete, when the mouse over the picture, the picture will appear a large preview of the image, the larger picture below will also have an introduction text.

The complete code for this example is as follows:

<script type= "Text/javascript" >
//<![ cdata[
$ (function () {
  var x = ten;
  var y =;
  $ ("A.tooltip"). MouseOver (function (e) {
    this.mytitle = this.title;
    This.title = "";  
    var imgtitle = This.mytitle? "<br/>" + this.mytitle: "";
    var tooltip = "<div id= ' tooltip ' >
</script>

I hope this article will help you with your jquery programming.