<UL id=gallery>
 <LI><A class=smallimage href=/site/eycmscn/upfile/201603/1631171611520.jpg><IMG alt="" src="images/001_small.jpg"></A></LI>
 
 <LI><A class=smallimage href=/site/eycmscn/upfile/201603/1631171613119.jpg><IMG alt="" src="images/002_small.jpg"></A></LI>
 
 <LI><A class=smallimage href=/site/eycmscn/upfile/201603/1631171614335.jpg><IMG alt="" src="images/003_small.jpg"></A></LI>
</UL>

ul#gallery { list-style:none; width:660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; overflow:hidden; }

ul#gallery li { width:200px; height:200px; float:left; margin:20px 20px 20px 0; }

ul#gallery li a.smallimage { background:#333; /*添加一個黑色的背景為圖片變暗的效果做鋪墊*/ display:block; width:200px; height:200px; }

#bigimage { position:absolute; display:none; /*大圖片的父標簽設(shè)置相對定位并將顯示樣式設(shè)置為隱藏*/ }

#bigimage img { width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){

 var x = 22;
 var y = 20;

 $("a.smallimage").hover(function(e){ //綁定一個鼠標懸停時事件
 //新建一個p標簽來存放大圖片，this.rel就是獲取到a標簽的大圖片的路徑，然后追加到body中
 $("body").append("<p id="bigimage"><img src="" this.rel "" alt="" /></p>"); 
  
 //改變小圖片的透明度為0.5，結(jié)合上面的CSS，看起來就象是圖片變暗了
 $(this).find("img").stop().fadeTo("slow",0.5);
  
 //將鼠標的坐標和聲明的x，y做運算并賦值給大圖片絕對定位的坐標，然后以fadeIn的效果顯示
 $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX x ) "px"}).fadeIn("fast");
  
 },function(){ <A href="http://www.sorcerylinux.org/">best australian pokies</A> //鼠標離開后 
 
 //將變暗的圖片復原
 $(this).find("img").stop().fadeTo("slow",1);
  
 //移除新增的p標簽
 $("#bigimage").remove();
 });
 
 $("a.smallimage").mousemove(function(e){ //綁定一個鼠標移動的事件
 
 //將鼠標的坐標和聲明的x，y做運算并賦值給大圖片絕對定位的坐標，這樣大圖片就能跟隨圖片而移動了
 $("#bigimage").css({top:(e.pageY -y ) "px",left:(e.pageX x ) "px"});
 });
});

//]]>
</script>

function widthJudge(e){
//頁面的總寬度減去鼠標當前的X坐標得到右側(cè)邊界的寬度
 var marginRight = document.documentElement.clientWidth - e.pageX;

//獲取彈出的大圖片的寬度
 var imageWidth = $("#bigimage").width();

//如果右側(cè)邊界的寬度小于彈出的大圖片的寬度
 if(marginRight < imageWidth)
 {
//重新計算變量x的值
  x = imageWidth 22;

//此時大圖片的位置應(yīng)該是當前鼠標指針的寬度減去新的x的值
  $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX - x ) "px"}); 
 }else{ //否則
//仍將x定義為22，這一步千萬不能省略，因為之前x的值已經(jīng)改變
  x = 22;

//如果右側(cè)的寬度值夠顯示大圖片，將仍然按照原來的位置顯示 
  $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX x ) "px"});
}; 
}

<script type="text/javascript">
//<![CDATA[
$(function(){ 
 
 var x = 22;
 var y = 20;
  
 $("a.smallimage").hover(function(e){
 $("body").append("<p id="bigimage"><img src="" this.rel "" alt="" /></p>"); 
 $(this).find("img").stop().fadeTo("slow",0.5);  
  widthJudge(e); //調(diào)用寬度判斷函數(shù)
  $("#bigimage").fadeIn("fast");
 },function(){
  $(this).find("img").stop().fadeTo("slow",1);
  $("#bigimage").remove();
 }); 
 
 $("a.smallimage").mousemove(function(e){
  widthJudge(e); //調(diào)用寬度判斷函數(shù)
 }); 
 
 function widthJudge(e){
  var marginRight = document.documentElement.clientWidth - e.pageX; 
  var imageWidth = $("#bigimage").width();
  if(marginRight < imageWidth)
  {
   x = imageWidth 22;
   $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX - x ) "px"}); 
  }else{
   x = 22;
   $("#bigimage").css({top:(e.pageY - y ) "px",left:(e.pageX x ) "px"});
 }; 
 }
});
//]]>
</script>