jquery實現鼠標移入移出切換圖片


在jquery中,可以使用mouseover和mouseout事件來實現鼠標移入移出圖片時,改變圖片的地址,從而實現圖片的切換。下面舉例講解jquery實現鼠標移入移出切換圖片。

  1.新建一個html文件,命名為test.html,用於講解jquery實現鼠標移入移出切換圖片。

 

  2.在test.html文件內,使用img標簽創建一張圖片,用於測試。

 

  3.在test.html文件內,設置img標簽的id為myimg,用於下面獲得img對象。

 

  4.在js標簽中,使用ready()方法在頁面加載完成時,執行function方法,在function方法內,通過id獲得img對象,使用on()方法給圖片綁定事件。

 

  5.在on()方法內,使用mouseover事件實現在鼠標移入圖片時,通過attr()方法改變圖片的路徑;使用mouseout事件實現在鼠標移出圖片時,通過attr()方法再次改變圖片的路徑,從而實現圖片的切換。

 

查看效果:

 

 

 

 

 

總結

1.使用img標簽創建一張圖片,用於測試。

2.在js中,使用on()方法給圖片綁定事件,在on()方法內,使用mouseover事件實現在鼠標移入圖片時,通過attr()方法改變圖片的路徑;使用mouseout事件實現在鼠標移出圖片時,通過attr()方法再次改變圖片的路徑,從而實現圖片的切換。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM