jquery 鼠标移上去显示大图片

实现功能是当鼠标移动到图片上显示大图片

html代码:

  <a href="图片位置" class="tooltip" title="商品图片"> <!--大图片-->
     <img alt="商品照片" src="图片位置" id="pcimage" align="middle" style="height:80px"> <!--小图片-->
  </img></a>

 

JS代码:由于我是动态增加 的图片所以用live绑定

$(function(){ 

var x = -300;  //我的图片在左边用了-300,如果在左边可以30或者其它数
 var y = -200;
 $('a.tooltip').live('mouseover', function(e) {
  this.imgTitle = this.title;
  this.title = ""; 
  var imgTitle = this.imgTitle? "<br/>" + this.imgTitle : "";
  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坐标，并且显示
    });
 
 $('a.tooltip').live('mouseout', function(e) {
  this.title = this.imgTitle; 
  $("#tooltip").remove(); 
    });
 $('a.tooltip').live('mousemove', function(e) {
  $("#tooltip")
   .css({
    "top": (e.pageY+y) + "px",
    "left":  (e.pageX+x)  + "px"
   });
 
    });

})

 

 

.show_tooltip li {
 list-style: none;
 display: inline;
 padding: 5px 5px 5px 5px;
}

/* tooltip */
#tooltip {
 position: absolute;
 border: 1px solid #333;
 background: #f7f5d1;
 padding: 3px 3px 3px 3px;
 color: #333;
 display: none;
}