图片鼠标悬浮预览 jquery 实现

在网页上的图片 比较小。当我们用鼠标悬浮上去的时候 想要显示出 大图的预览效果。我找了一个使用 jquery  制作的效果。

jquery 代码如下

$(function(){
 var x = 10;
 var y = 20;
 $("a.tooltip").mouseover(function(e){
  this.myTitle = this.title;
  this.title = ""; 
  var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
  var imgUrl =  $(this).children().attr("src");
  var tooltip = "<div id='tooltip'><img src='"+ imgUrl +"' 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"
   });
 });
})

 

对应的html 代码如下：

<a href="#" class="tooltip"><img src="/uploads/allimg/090929/8-0Z9291R5000-L.gif" width="172" height="162"/></a>

<style type="text/css">
#tooltip{
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:2px;
 display:none;
 color:#fff;
}
</style>

当A 标记 class 属性为 tooltip 里面的 img 标记将会被 jquery 注册。鼠标悬浮上去后就会显示出跟随预览效果。