jQuery當滑鼠懸停時放大圖片的效果實例_jquery

這個效果最初源自於小敏同志的一個想法，剛開始做的時候只能實現彈出的圖片是固定的，不能隨滑鼠移動，最後加以改善，終於實現了比較理想的效果。今天就把製作該效果的經驗與大家一同分享。先看看最終效果示範：

HTML結構部分：
先寫一個無序列表的結構，a標籤中的img標籤用來存放小圖片，a標籤加入一個rel屬性，用來存放大圖片的路徑。

複製程式碼 程式碼如下:

 
• 
   
• 
   
• 
   

CSS樣式表部分：
bigimage是用jQuery創建的一個p標籤的id，用來存放大圖片，設定其樣式為絕對定位，並先隱藏。為a標籤加上一個黑色的背景，是為了讓圖片變暗的效果做鋪墊。就這樣，一個簡單的相簿效果就完成了。

複製程式碼 程式碼如下:

ul#gallery { list-style:none; width:n 660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; overflow:hidden; }
 ul#gallery li { width:200px; ; margin:20px 20px 20px 0; }   
 ul#gallery li a.smallimage { background:#333; /*加上一個黑色的背景為圖片變暗的效果做鋪墊*/ display:block; width:200px; height:200px; }  
 #bigimage { position:absolute; display:none; /*大圖片的父標籤設定相對定位並將顯示樣式設為隱藏*/ }  
 #bigimage img { width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; }

jQuery程式碼部分：
先宣告2個變數，y用大圖片離滑鼠的距離。在body中追加一個id為bigimage的p標籤，用來存放大圖片，大圖片的路徑就包含在了a標籤的rel屬性中。當滑鼠在小圖片懸停的時候，將獲取到的滑鼠在瀏覽器中的座標賦值給大圖片絕對定位的座標，並以淡入的效果顯示。之後，再給小圖片綁定一個mousemove事件，也就是當滑鼠移動的時候，大圖片就會跟著滑鼠移動了。看以下的程式碼：

複製程式碼 程式碼如下:

 

到這一步，效果已經差不多了，但是正如藍秋楓同誌所提到的，效果還不完美。如果彈出的大圖片超過了瀏覽器的寬度就會出現滾動條，這對於用戶體驗來說的確很不好。趁週末有時間我又在原來的基礎上進行了修改。
先分析下思路，預設情況下，彈出的大圖片的位置始終是在當前滑鼠指標的右側，如果當前滑鼠指標離瀏覽器右側邊界的寬度小於彈出的大圖片的寬度時，就會出現圖片溢出瀏覽器的現象。那麼只要寫一個語句判斷目前滑鼠指標離瀏覽器右側的邊界的寬度是否小於大圖片的寬度，然後再根據這個判斷來顯示。
有了上面的想法就好辦了，為了讓程式碼更簡潔，提高復用性，我新增了一個widthJudge函數用來判斷寬度：

複製程式碼 程式碼如下:

function widthJudge(e){ 
        //頁面上的總寬度減去滑鼠目前的X座標得到右側邊界的寬度 
    var marginRight = doc
             //取得彈出的大圖片的寬度 
     var imageWidth = $("#big   的寬度小於彈出的大圖片的寬度 
    if(marginRight      { 
               
                 //且此時大影像的位置應該是目前滑鼠指標的寬度減去新的x的值 
        $("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX - x ) 'px'}); 
}else{    //否則 
                  //仍為x定義為22，且此步驟千萬無法省略，因為先前x              //如果右側的寬度值夠顯示大圖片，將仍依照原先的位置顯示 
         $("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX x ) 'px' }); 
     }; 
 }


最後結合上面的程式碼，完整的jQuery程式碼部分如下：

複製程式碼


程式碼如下:

     }   });   //]]>    //]]>   解決了圖片溢位瀏覽器的問題，這個效果還算不錯了。如果你喜歡這個效果，你可以下載原始檔。