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

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 id=”bigimage”><img src=”‘+%20this.rel%20+%20′” alt=”” /></p>’); 
             $(this).find(‘img’).stop().fadeTo(‘slow’,0.5); 
         widthJudge(e);    //调用宽度判断函数 
         $(“#bigimage”).fadeIn(‘fast’);