JQuery是一個輕量級的JavaScript庫,可以用來簡化HTML文檔操作、事件處理、動畫效果、AJAX等多種操作。鼠標懸浮換圖片是jQuery中常見的一個功能,它可以讓圖片隨著鼠標的懸停發生變化。下面我們來看一下這個功能的實現。
// HTML部分 <div class="img-box"> <img src="pic1.jpg" alt="圖片1"> <img src="pic2.jpg" alt="圖片2"> </div> // jQuery部分 $(".img-box img").hover(function() { $(this).attr("src", $(this).attr("src").replace("1", "2")); }, function() { $(this).attr("src", $(this).attr("src").replace("2", "1")); });
上面代碼中,我們首先在HTML部分定義了一個包含兩張圖片的div,分別為pic1.jpg和pic2.jpg。然后在jQuery部分,我們使用了hover()方法,其接受兩個參數,分別為鼠標進入和離開時觸發的函數。在進入時,我們使用attr()方法將圖片的src屬性進行替換,將其中的數字1替換為2,實現圖片的變化;在離開時,同樣進行反向操作,將數字2替換為1。
這種鼠標懸浮換圖片的效果可以用于網站的圖片展示、商品展示、導航欄等多個場景,可以提高用戶體驗,增加頁面的交互性。