html 代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
     < TITLE >图片显示效果 </TITLE>
     < SCRIPT SRC ="../js/jquery-1.4.2.min.js" TYPE ="text/javascript" > </SCRIPT>
     < SCRIPT SRC ="../js/one.js" TYPE ="text/javascript" > </SCRIPT>
</HEAD>
< style type ="text/css" >
  *{ margin:5px; padding:0px;}
  ul li{
  list-style-type: none;        
    display: inline;        
  }
</style>
< BODY >
     < ul >
         < li > < a href ="C:/WINDOWS/Web/Wallpaper/01.jpg" title ="图片1" CLASS ="tooltip" > < IMG SRC ="C:/WINDOWS/Web/Wallpaper/01.jpg" WIDTH ="80" HEIGHT ="80" BORDER ="0" ALT ="图片1" > </a> </li>
   < li > < a href ="C:/WINDOWS/Web/Wallpaper/02.jpg" title ="图片2" CLASS ="tooltip" > < IMG SRC ="C:/WINDOWS/Web/Wallpaper/02.jpg" WIDTH ="80" HEIGHT ="80" BORDER ="0" ALT ="图片2" > </a> </li>
   < li > < a href ="C:/WINDOWS/Web/Wallpaper/03.jpg" title ="图片3" CLASS ="tooltip" > < IMG SRC ="C:/WINDOWS/Web/Wallpaper/03.jpg" WIDTH ="80" HEIGHT ="80" BORDER ="0" ALT ="图片3" > </a> </li>
   < li > < a href ="C:/WINDOWS/Web/Wallpaper/04.jpg" title ="图片4" CLASS ="tooltip" > < IMG SRC ="C:/WINDOWS/Web/Wallpaper/04.jpg" WIDTH ="80" HEIGHT ="80e" BORDER ="0" ALT ="图片4" > </a> </li>
     </ul>
</BODY>
</HTML>
JQuery代码:
  $( function(){
     var x=5;
     var y=5;
    $( "a.tooltip").mouseover( function(e){
       this.myTitle = this.title;
       this.title = "";
       var imgTitle = this.myTitle ? "<br/>" + this.myTitle: " ";
       var tooltip = "<div id='tooltip'> <img src='" + this.href + "' alt='图片1' WIDTH='400' HEIGHT='400' />" +imgTitle+ "</div>"; //创建<div>元素
      $( "body").append(tooltip); //将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(); //移除    tooltip    <div> 元素
    }).mouseout( function(e){
      $( "#tooltip").css({
         "top" : (e.pageY+y) + "px",
         "left" : (e.pageX+x) + "px"
      });
    });
  })