非常簡單的jQuery翻滾

Question

我做了一個非常簡單的jQueryimg翻轉功能靈感來源於此： http://www.smileycat.com/miaow/archives/000224.php。

它只是檢查名稱中包含_off的所有img，並將它們替換爲img，其名稱與「_on」相同，但不是「_off」。

因爲我不能在我的佈局中使用背景img，所以我覺得這是一個方便的解決方案。 但我感覺交換不順暢，就像函數運行緩慢一樣。 你覺得呢？ 有沒有方法來優化它？

下面是代碼：

function roll_over() { 
     $("img[src*='_off']").hover(
      function() { 
       var stringa = $(this).attr("src"); 
       var stringa = stringa.replace("_off", "_on"); 
       $(this).attr("src", stringa); 
      }, 
      function() { 
       var stringa = $(this).attr("src"); 
       var stringa = stringa.replace("_on", "_off"); 
       $(this).attr("src", stringa); 
      } 
     ); 
    } 

Answer 1

反覆做$("img[src*='_off']")是低效的。這意味着瀏覽器在翻頁時不得不搜索頁面上的所有內容。你應該包括jQuery Lint關於優化的信息...

Answer 2

你的代碼是壞的。爲什麼？

1. 當你有這樣的形象將失敗：...src="/images/my_office.png"...
2. 您使用JS的東西是那麼原始，可以在純CSS來實現
3. 的*_on圖像將在mouseover事件被加載所以你暫時不會看到任何圖像。

如何解決所有這些問題？使用CSS Sprites。

1. 這樣一個創建圖像：http://www.digart.pl/gfx/ico/s/fb.gif
2. HTML代碼：<a href="..." id="myId">blah</a>（五言的，你不必使用A元素）。

3. CSS代碼：

   #myId { 
       display: inline-block; /* or block, or even inline with correct line-height */ 
       width: 33px; 
       height: 20px; 
       background: url(/path/to/img) 0 0 no-repeat; 
   } 
   #myId:hover { 
       background-position: 50% 0; 
   } 
   

如果你仍然想使自動化整個過程，然後用JS只有改變背景位置，而不是圖像。

Answer 3

我找到了一個很好的功能，在這裏 http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html

$("#mylink img").hover(
function() 
{ 
    this.src = this.src.replace("_off","_on"); 
}, 
function() 
{ 
    this.src = this.src.replace("_on","_off"); 
} 
); 

我只指定IMGS

Answer 4

的ID或類如何像：

// Add an image to your page as: 
// <img src="button.png" class="rollover"> 

<script type='text/javascript'> 
$(document).ready(function(){ 
    initRollovers(); 
}); 
function initRollovers() { 
    // Assign a class to the images you want to have as roll-over enabled. 
    // Example: 
    // <img src="button.png" class="rollover"> 
    // NOTE: No "dot" when setting the class on the image... But jQuery needs the .dot in order to search for classes in this script: 
    var classIdentifier = ".rollover"; 

    // This example assumes that only the "on" state has a suffix: 
    // button.png 
    // button_on.png 

    // If you have a suffix for both states, edit them here: 
    // button_off.png 
    // button_on.png 
    // ... would be edited as: 
    // var offSuffix = "_off.png"; 
    // var onSuffix = "_on.png"; 

    var offSuffix = ".png"; 
    var onSuffix = "_on.png"; 

    $(classIdentifier).each(function() { 

     var obj = $(this); 
     var mySrcOff = obj.attr("src"); 
     var mySrcOn = mySrcOff.replace(offSuffix, onSuffix); 
     obj.mouseout(function() { 
      $(this).attr("src", mySrcOff); 
     }); 
     obj.mouseover(function() { 
      $(this).attr("src", mySrcOn); 
     }); 

     // Preload Off State 
     $('<img />').attr('src', mySrcOn).appendTo('body').css('display','none'); 

    }); 
} 

</script> 

。