在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()方法再次改變圖片的路徑,從而實現圖片的切換。