3

对我来说很有趣的一个。我有一个视频播放器，其控件在悬停时显示。最初，我使用 CSS 执行此操作，但不得不将策略更改为 javascript 以与浏览器全屏 api 配合使用（顺便说一句，这意味着您总是在视频上悬停）。

我的新方法是mousemove为视频容器设置一个事件处理程序，该容器添加一个类并设置一个超时来删除它，如果已经设置了超时，则将其清除。这很有效，但逻辑不能扩展到一个以上的玩家。

TLDR：如何扩展我的逻辑以扩展到多个视频容器？变量的范围time需要包含在每个元素事件中，但也需要在处理程序之外，以便它可以从一个事件清除到下一个事件（在同一元素上）。

感谢您的帮助——这些逻辑问题对我来说总是很困难。

这是一个jsFiddle 示例。您会注意到，当您将悬停限制在一个元素时效果很好，但是当您扩展到页面上的其余元素时会出现问题。

HTML：

<div class="cont">

    <div class="controls">controls</div>
</div>

JavaScript：

var time;

$('body').on('mousemove', '.cont', function(){

    var thiis = $(this);

    if (time){

        clearTimeout(time);
    }

    thiis.addClass('showControls');

    time = setTimeout(function(){

        thiis.removeClass('showControls');
    }, 2000);
});
4

1 回答 1

5

您可以使用 jQuery 的 data 方法存储时间变量，该方法可以在每个元素上存储数据。

$('body').on('mousemove', '.cont', function(){

  var thiis = $(this),
      // get the time from the data method
      time = thiis.data("timer-id");

   if (time){
     clearTimeout(time);
   }

  thiis.addClass('showControls');

   var new_time = setTimeout(function(){
    thiis.removeClass('showControls');
   }, 2000);

   // save the new time
  thiis.data("timer-id", new_time);
});
于 2013-06-02T21:04:03.943 回答