<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>

效果：跟隨滑鼠移動