jQuery当鼠标悬停时放大图片的效果实例(2)

function widthJudge(e){ 
        //页面的总宽度减去鼠标当前的X坐标得到右侧边界的宽度 
     var marginRight = document.documentElement.clientWidth - e.pageX;     
             //获取弹出的大图片的宽度 
     var imageWidth = $("#bigimage").width();     
             //如果右侧边界的宽度小于弹出的大图片的宽度 
    if(marginRight < imageWidth) 
     { 
                 //重新计算变量x的值 
         x = imageWidth + 22; 
                 //此时大图片的位置应该是当前鼠标指针的宽度减去新的x的值 
        $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX - x ) + 'px'}); 
     }else{    //否则 
                  //仍将x定义为22，这一步千万不能省略，因为之前x的值已经改变 
         x = 22; 
                 //如果右侧的宽度值够显示大图片，将仍然按照原来的位置显示 
         $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'}); 
     }; 
 }

最后再结合上面的代码，完整的jQuery代码部分如下：

复制代码 代码如下:

<script type="text/javascript"> 
 //<![CDATA[ 
 $(function(){    
     var x = 22; 
     var y = 20; 
     $("a.smallimage").hover(function(e){ 
             $("body").append('<p><img src="'+ this.rel + '" alt="" /></p>'); 
             $(this).find('img').stop().fadeTo('slow',0.5); 
         widthJudge(e);    //调用宽度判断函数 
         $("#bigimage").fadeIn('fast'); 
     },function(){ 
         $(this).find('img').stop().fadeTo('slow',1); 
         $("#bigimage").remove(); 
     });  
     $("a.smallimage").mousemove(function(e){ 
         widthJudge(e);    //调用宽度判断函数 
     });  
     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>

解决了图片溢出浏览器的问题，这个效果还算不错了。如果你喜欢这个效果，你可以下载源文件。

您可能感兴趣的文章: