广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    jQuery鼠标经过(hover)事件的延时处理

    2018-04-04 08:35:24 次阅读 稿源:互联网
    零七广告

    jQuery鼠标经过(hover)事件的延时处理,具体JS代码如下:

    1. (function($){ 
    2.     $.fn.hoverDelay = function(options){ 
    3.         var defaults = { 
    4.             hoverDuring: 200, 
    5.             outDuring: 200, 
    6.             hoverEvent: function(){ 
    7.                 $.noop(); 
    8.             }, 
    9.             outEvent: function(){ 
    10.                 $.noop(); 
    11.             } 
    12.         }; 
    13.         var sets = $.extend(defaults,options || {}); 
    14.         var hoverTimer, outTimer; 
    15.         return $(this).each(function(){ 
    16.             $(this).hover(function(){ 
    17.                 clearTimeout(outTimer); 
    18.                 hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring); 
    19.             },function(){ 
    20.                 clearTimeout(hoverTimer); 
    21.                 outTimer = setTimeout(sets.outEvent, sets.outDuring); 
    22.             }); 
    23.         }); 
    24.     } 
    25. })(jQuery); 

    hoverDelay方法共四个参数,表示意思如下:

    hoverDuring        鼠标经过的延时时间
    outDuring            鼠标移出的延时时间
    hoverEvent          鼠标经过执行的方法
    outEvent              鼠标移出执行的方法

    该函数的目的在于让鼠标经过事件和延时分离的出来,延时以及延迟的清除都已经由此方法解决了。您所要做的,就是设定延时的时间大小,以及相应的鼠标经过或是移除事件即可。举个简单的例子吧,如下代码:

    1. $("#test").hoverDelay({ 
    2.     hoverDuring: 1000, 
    3.     outDuring: 1000, 
    4.     hoverEvent: function(){ 
    5.         $("#tm").show(); 
    6.     }, 
    7.     outEvent: function(){ 
    8.         $("#tm").hide(); 
    9.     } 
    10. }); 

     以下为更简洁的一个案例:

    1. $("#test").hoverDelay({ 
    2.     hoverEvent: function(){ 
    3.         alert("经过我!"); 
    4.     } 
    5. }); 

    表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过我!”文字字样的弹出框。

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告