jQuery實現的滑鼠滑過切換圖片程式碼例項

螞蟻小編發表於2017-02-26
jQuery
有時候網頁需要這樣的簡單效果，那就是當滑鼠滑過預設圖片的時候，能夠實現圖片的切換，可能在實際應用中，往往沒有這麼簡單，不過大家可以自行擴充套件一下，下面簡單介紹一下次效果。

html靜態程式碼如下:

[HTML] 純文字檢視 複製程式碼
<body> 
<img src="images/mayi.jpg" /> 
</body>

jquery切換程式碼:

[JavaScript] 純文字檢視 複製程式碼
$(document).ready(function(){ 
  var newImage=new Image();
  var oldImage=$('img').attr('src'); 
  newImage.src='images/new.jpg'; 
  $('img').hover(function(){ 
    $('img').attr('src',newImage.src); 
  }, 
  function(){ 
    $('img').attr('src',oldImage); 
  })
})

原理很簡單，就是為圖片的註冊hover事件處理函式，當滑鼠懸浮的時候，修改圖片的src屬性值即可。

相關閱讀:

1.attr()函式可以參閱jQuery attr()一章節。

2.hover事件可以參閱jQuery hover事件一章節。

相關文章