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

2020-05-17 06:25:22易采站长站整理

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

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