hover事件延迟处理代码实例详解

快乐打工仔 分类:实例代码

大多数情况下,网站的hover事件都没有进行延迟处理。

但是有些时候延迟处理可以提高网站的性能。比如,我们看完第一个选项卡的内容之后,再去看第四个选项卡的内容,这个时候可能鼠标会滑过第二个、第三个,于是这两个选项卡的内容就有可能被展示,这并不是我们想要的,使用hover事件延迟处理可以有效解决此问题。先看一个没有延迟效果的选项卡:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{
  font:12px Verdana, Geneva, sans-serif;
  color:#404040;
}
.tabs {
  margin:10px 0 0 20px;
  width:360px;
  position:relative;
  overflow:hidden;
  height:160px;
}
.tabs span {
  z-index:2;
  font-size:12px;
  border:1px solid #d5d5d5;
  width:95px;
  height:25px;
  line-height:25px;
  text-align:center;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
span.active{
  background-color:#d5d5d5;
}
#tab-01, #tab-02, #tab-03{
  position:absolute;
  top:26px;
  left:0;
  width:338px;
  padding:10px;
  height:93px;
  border:1px solid #d5d5d5;
  z-index:1;
}
#tab-02, #tab-03{
  display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function () {  
  $('.tabs span').mouseover(function () {  
    $('.tabs div').hide();
    $(this)
      .siblings('span')
      .removeClass('active')
      .end()
      .addClass('active')
      .next('div')
      .show();
  });  
});  
</script>
</head>
<body>
<div class="tabs"> 
  <span class="active">犀牛前端部落一</span>
  <div id="tab-01">犀牛前端部落一</div>
  <span>犀牛前端部落二</span>
  <div id="tab-02">犀牛前端部落二</div>
  <span>犀牛前端部落三</span>
  <div id="tab-03">犀牛前端部落三</div>
</div>
</body>
</html>

上面的代码实现了普通的选项卡效果,当我们无意中滑过任何一个选项卡都会产生效果。

下面就看使用延迟技术改造上面的代码,如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{
  font:12px Verdana, Geneva, sans-serif;
  color:#404040;
}
.tabs {
  margin:10px 0 0 20px;
  width:360px;
  position:relative;
  overflow:hidden;
  height:160px;
}
.tabs span {
  z-index:2;
  font-size:12px;
  border:1px solid #d5d5d5;
  width:95px;
  height:25px;
  line-height:25px;
  text-align:center;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
span.active{
  background-color:#d5d5d5;
}
#tab-01, #tab-02, #tab-03{
  position:absolute;
  top:26px;
  left:0;
  width:338px;
  padding:10px;
  height:93px;
  border:1px solid #d5d5d5;
  z-index:1;
}
#tab-02, #tab-03{
  display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function () {
  $.fn.hoverDelay = function (options) {
    var defaults = {
      hoverDuring: 200,
      hoverEvent: function () {
        $.noop();
      }
    };
    var sets = $.extend(defaults, options || {});
    var hoverTimer, outTimer;
    return $(this).each(function () {
      $(this).hover(function () {
        clearTimeout(hoverTimer);
        var _this = this;
        hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring,_this);
      });
    });
  }
  var done=function (_this) {
    $('.tabs div').hide();
    $(_this)
      .siblings('span')
      .removeClass('active')
      .end()
      .addClass('active')
      .next('div')
      .show();
  };
  $('.tabs span').hoverDelay({ hoverEvent: done });
});
</script>
</head>
<body>
<div class="tabs"> 
  <span class="active">犀牛前端部落一</span>
  <div id="tab-01">犀牛前端部落一</div>
  <span>犀牛前端部落二</span>
  <div id="tab-02">犀牛前端部落二</div>
  <span>犀牛前端部落三</span>
  <div id="tab-03">犀牛前端部落三</div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function () {}),当文档结构完全加载完毕再去执行函数中的代码。

(2). $.fn.hoverDelay = function (options) {},为jquery实例对象自顶一个hoverDelay方法,此方法实现了延迟效果。

(3).var defaults = {

  hoverDuring: 200,

  hoverEvent: function () {

    $.noop();

  }

},此对象存储的是一些默认参数值。

比如默认延迟时间,和hover事件处理函数。

(4).var sets = $.extend(defaults, options || {}),和并自定义参数对象和默认对象,也就是说如果规定了自定义的参数则使用自定义的参数,否则使用默认参数。

(5).var hoverTimer, outTimer,声明两个变量,后面会用到。

(6).return $(this).each(function () {

  $(this).hover(function () {

    clearTimeout(hoverTimer);

    var _this = this;

    hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring,_this);

  });

}),前面加个return是为了实现链式调用。

$(this).each(function () {}),遍历每一个匹配的元素。

并且为每一个匹配元祖注册hover事件处理函数。

clearTimeout(hoverTimer)目的是为了停止前一将要执行的事件处理函数,这样的话不会不出现当我们连续滑过多个选项卡,会依次执行的情况,只会执行最后一个选项卡的切换。

(7).var _this = this,将当前this指向赋值给变量_this。

(8).hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring,_this),延迟执行事件处理函数。

(9).var done=function (_this) {

  $('.tabs div').hide();

  $(_this)

    .siblings('span')

    .removeClass('active')

    .end()

    .addClass('active')

    .next('div')

    .show();

},事件处理函数,里面是非常简单的处理。

二.相关阅读:

(1).$.fn可以参阅$.fn作用简单介绍一章节。

(2).$.extend()可以参阅jQuery.extend()一章节。

(3).each()可以参阅jQuery each()一章节。

(4).hover()可以参阅jQuery hover事件一章节。

(5).clearTimeout()可以参阅clearTimeout()一章节。

(6).setTimeout()函数可以参阅setTimeout()一章节。

(7).siblings()可以参阅jQuery siblings()一章节。

(8).removeClass()可以参阅jQuery removeClass()一章节。

(9).end()可以参阅jQuery end()一章节。

(10).next()可以参阅jQuery next()一章节。

hover事件延迟处理代码实例详解,这样的场景在实际项目中还是用的比较多的,关于hover事件延迟处理代码实例详解就介绍到这了。

hover事件延迟处理代码实例详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容