鼠标移入查看缩略图详细图片

<div>
 <img src="img/2.jpg" alt="..." id="img2"/>
<script type="text/javascript">
$(function(){
    $("img[id^='img']").mouseover(function(e){       //鼠标移入
   	 var alt=this.alt;
    if(alt!="无"){
       var myTitle=this.title;
       var imgTitle=myTitle?"<br/>"+myTitle:"";  //获取图片的title
       var zoomView=$('<div id="zoomView" ><img src="'+this.src+'" width="200px" height="200px" />'+imgTitle+"</div>"); //建立图片查看框
       $("body").append(zoomView);
       $("#zoomView").css({"top":(e.pageY-200)+"px","left":(e.pageX+10)+"px"});  //注意得在CSS文件中将其设置为绝对定位
    }
   }).mousemove(function(e){
   	var alt=this.alt;
   	  if(alt!="无"){
       $("#zoomView").css({"top":(e.pageY-200)+"px","left":(e.pageX+10)+"px"}); //鼠标移动时及时更新图片查看框的坐标
   	  }
   }).mouseout(function(){
   	var alt=this.alt;
 	  if(alt!="无"){
       $("#zoomView").remove();    //鼠标移出时删除之前建立的图片查看框
 	  }
   }); 
    
});
</script>
</div>

css

<style type="text/css">
#zoomView{
    position:absolute;}
</style>

js

<script src="js/jquery.js"></script>

效果：跟随鼠标移动