jQuery控制圖片的hover效果

圖片的hover效果可以用css來實現也可以用js來實現。典型的就是smartRollover.js。

用js實現的好處是：如果一個網站中圖片的hover效果比較多，可能每一個都要有css控制，那樣代碼有的冗余。但是有了js控制，不管有多少圖片，hover效果都可以用同樣的js，但是必須保證圖片的out/off效果和over/on效果命名有規律性，比如：

navi01_out.jpg/navi01_off.jpg

navi01_over.jpg/nvai02_on.jpg

這樣js控制起來非常方便。找到匹配的名稱，hover時替換成另一個名稱。

今天我想用jQuery控制一下效果：

代碼如下：

 
           1 <script type="text/javascript"> 
          
 
           2     $( 
          function() { 
          
 
           3          
          var $img = $("img");         
          
 
           4         $img.hover( 
          function() { 
          
 
           5             $( 
          this).attr("src",$( 
          this).attr("src").replace("_out","_over")); 
          
 
           6         }, 
          function() { 
          
 
           7             $( 
          this).attr("src",$( 
          this).attr("src").replace("_over","_out")); 
          
 
           8         }); 
          
 
           9     }); 
          
 
          10 </script> 
         

 

$img可以由你指定，你可以指定成其它的

比如： var $img = $("img.imgover");   表示所有img的class為imgover的圖片

其它的可以根據你的需求來。但必須保證圖片的命名有規律