jQuery當(dāng)鼠標懸停時放大圖片的效果實例

2019-11-20 22:34:49

字體：大中小

供稿：網(wǎng)友

這個效果最初源于小敏同志的一個想法，剛開始做的時候只能實現(xiàn)彈出的圖片是固定的，不能隨鼠標移動，最后加以改善，終于實現(xiàn)了比較理想的效果。今天就把制作該效果的經(jīng)驗與大家一同分享。先看看最終效果演示：

HTML結(jié)構(gòu)部分：
先編寫一個無序列表的結(jié)構(gòu)，a標簽中的img標簽用來存放小圖片，a標簽添加一個rel屬性，用來存放大圖片的路徑。

<UL id=gallery sizcache="6" sizset="7"> 
 <LI sizcache="6" sizset="7"><A class="smallimage" href="http://www.companysz.com" rel=images/001_big.jpg><IMG alt="" src="images/001_small.jpg"></A> 
 <LI sizcache="6" sizset="8"><A class="smallimage" href="http://www.companysz.com" rel=images/002_big.jpg><IMG alt="" src="images/002_small.jpg"></A> 
 <LI sizcache="6" sizset="9"><A class="smallimage" href="http://www.companysz.com" rel=images/003_big.jpg><IMG alt="" src="images/003_small.jpg"></A> 
 </LI></UL>

CSS樣式表部分：
bigimage是用jQuery創(chuàng)建的一個p標簽的id，用來存放大圖片，設(shè)置其樣式為絕對定位，并先隱藏。給a標簽添加一個黑色的背景，是為了給圖片變暗的效果做鋪墊。就這樣，一個簡單的相冊效果就做好了。

復(fù)制代碼代碼如下:

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

jQuery代碼部分：
先聲明2個變量x，y用來存放大圖片離鼠標的距離。在body中追加一個id為bigimage的p標簽，用來存放大圖片，大圖片的路徑就包含在了a標簽的rel屬性中。當(dāng)鼠標在小圖片懸停的時候，將獲取到的鼠標在瀏覽器中的坐標賦值給大圖片絕對定位的坐標，并以淡入的效果顯示。之后，再給小圖片綁定一個mousemove事件，也就是當(dāng)鼠標移動的時候，大圖片就會跟著鼠標移動了。看以下的代碼：

復(fù)制代碼代碼如下:

<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(){ //鼠標離開后  
     //將變暗的圖片復(fù)原 
        $(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>

到這一步，效果已經(jīng)差不多了，但是正如藍秋楓同志提到的，效果還并不完美。如果彈出的大圖片超過了瀏覽器的寬度就會出現(xiàn)滾動條，這對于用戶體驗來說的確很不好。趁周末有時間我又在原來的基礎(chǔ)上進行了修改。
先分析下思路，默認情況下，彈出的大圖片的位置始終是在當(dāng)前鼠標指針的右側(cè)，如果當(dāng)前鼠標指針離瀏覽器右側(cè)邊界的寬度小于彈出的大圖片的寬度時，就會出現(xiàn)圖片溢出瀏覽器的現(xiàn)象。那么只要寫一個語句判斷當(dāng)前鼠標指針離瀏覽器右側(cè)的邊界的寬度是否小于大圖片的寬度，然后再根據(jù)這個判斷來顯示。
有了上面的思路就好辦了，為了使代碼更簡潔，提高復(fù)用性，我新增了一個widthJudge函數(shù)用于判斷寬度：

復(fù)制代碼代碼如下:

function widthJudge(e){  
        //頁面的總寬度減去鼠標當(dāng)前的X坐標得到右側(cè)邊界的寬度  
     var marginRight = document.documentElement.clientWidth - e.pageX;      
             //獲取彈出的大圖片的寬度  
     var imageWidth = $("#bigimage").width();      
             //如果右側(cè)邊界的寬度小于彈出的大圖片的寬度  
    if(marginRight < imageWidth)  
     {  
                 //重新計算變量x的值  
         x = imageWidth + 22;  
                 //此時大圖片的位置應(yīng)該是當(dā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'});  
     };  
 }

最后再結(jié)合上面的代碼，完整的jQuery代碼部分如下：

復(fù)制代碼代碼如下:

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