鼠标放在图片上显示大图 - 脚本学堂 - www. 
 
 
.imgDiv{ position:absolute;} 
#showPic{ position:absolute; z-index:2; top:200px; left:200px; width:150px; height:300px; display:none;} 
 

 
 
 
 
$("#pic img").mouseover(function(e){ 
    //var $img=$("");    //创建一个img标签 
    //$("#showPic").append($img); //将img插入到div 
    var src=/blog_article/$/index.html(this).attr("src"); //获取当前src 
    var scrTop=e.originalEvent.y || e.originalEvent.layerY || 0;   //获取当前鼠标的Y坐标 
    var scrLeft= e.originalEvent.x || e.originalEvent.layerX || 0; //获取当前鼠标的X坐标 
    $("#showPic").css("top",scrTop).css("left",scrLeft).show(500);  //设置div宽度高度并显示 
    $("#showPic img").attr("src",src).attr("width",'400px').attr('height','400px').addClass("imgDiv");//设置图片的路径.高度。宽度 
});  /* 鼠标移开事件*/ 
$("#pic").mouseout(function(){ 
    $("#showPic").hide(); 
}); 
 
 

 

 
 
 
 
鼠标放在图片上显示大图 - www. 
 
 
#tip{position:absolute; z-index:2; border:1px solid black; width:400px; background:black; color:white;} 
li{ float:left; list-style:none; padding:0 10px;} 
li img{ width:200px; height:150px;} 
 

 

 
   
• 
 
   
• 
 
   
• 
 

 
 
    $("li img").mouseover(function(e){ 
        var div="" //创建div 
        $("body").append(div);        //添加div 
        var img=""; //创建图片 
        var mytitle=this.alt;  //设置标题 
        $("div#tip").append(img).append(mytitle);   //插入图片和标题到div后面 
         
        $("div#tip").css({      //设置div的属性 
            "top":+e.pageY+"px"  //设置top 
            ,"left":+e.pageX+"px" //设定left 
        }).find("img").css({    //设置div里面img属性 
            "width":"400px"    //设置宽度 
            ,"height":+"300px" //设置高度 
        }).end().show();       //返回到div然后显示 
    }).mouseout(function(){      
        $("div#tip").remove(); //删除div  
    }).mousemove(function(e){  //鼠标移动事件 
        $("div#tip").css({ 
            "top":+e.pageY+"px"  
            ,"left":+e.pageX+"px" 
        }); 
    });