首頁 > web前端 > js教程 > jquery mousemove事件滑鼠滑過圖片

jquery mousemove事件滑鼠滑過圖片

黄舟
發布: 2017-06-28 10:23:00
原創
1370 人瀏覽過

 需要解決的問題:滑鼠停在圖片上面的時候的現在這個張圖片的相關信息,

 我的第一個感覺是使用滑鼠事件:mousemove 當他/她停留在圖片上面都時候就可以觸發相應顯示的事件,mouseout離開的時候觸發隱藏事件

#但是在實際的完成中發現:滑鼠停留在圖片上訊息會不停的抖動,查閱相關資料發現,手冊對mouseover事件的解釋是:

注意:使用者把滑鼠移動一個像素,就會發生一次mousemove 事件。處理所有 mousemove 事件會耗費系統資源。請謹慎使用該事件。

 也就是說:我們滑鼠是即使有像素的抖動都會觸發顯示事件, 難怪會造成圖片資訊的資源

解決的辦法是:使用hover,官方手冊對這個方法的解釋:

一個模仿懸停事件(滑鼠移動到一個物件上面及移出這個物件)的方法。這是一個自訂的方法,它為頻繁使用的任務提供了一種「保持在其中」的狀態。

當滑鼠移到一個符合的元素上面時,會觸發指定的第一個函數。當滑鼠移出這個元素時,會觸發指定的第二個函數。而且,會伴隨著滑鼠是否仍處在特定元素中的偵測(例如,處在p中的影像),如果是,則會繼續保持「懸停」狀態,而不觸發移出事件(修正了使用mouseout事件的一個常見錯誤)。

實例程式碼:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
登入後複製

以上是jquery mousemove事件滑鼠滑過圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板