Question

我正在处理的页面：http://working.studioas-cc.com/

这里有一个项目标题列表。在悬停项目标题时，它会显示其特色图片。

如果鼠标光标的Y位置低于浏览器窗口高度的50％，我想将这些图像放在上方标题上。

我想我需要在跨度中添加一个额外的类来重新定位它，但我不确定如何去做。

任何帮助非常感谢：）

Answer 1

您可以使用jquery（我看到您已经使用它）来完成此任务。

$(theTextElement).hover(function(e) {
  //Mouse Over Event
  //The Mouse Y Position
  var y = e.pageY;
  //The window height
  var windowY = $(window).height();
  //The mouse is past the halfway point of the screen
  if((windowY/2)<y){
    //Toggle the class
    $(theImageElement).addClass('viewTop');
    $(theImageElement).removeClass('viewBottom');
    //Show the element
    $(theImageElement).show();
  }
}, function() {
    $(theImageElement).hide();
});

这是基于您想要使用CSS解决定位的假设。您必须添加一些代码来确定要显示的图像等。

如果有些事情不清楚，请告诉我。

Answer 2

您可以使用“onmousemove”事件来跟踪网页内的鼠标位置。鉴于此，将其Y位置与窗口高度进行比较，并相应地更改类别。

这是为您提供快速启动的事件监听器：

document.onmousemove = function(event) {
  // X position of cursor
  event.x;
  // Y position of cursor
  event.y;

  if(event.y < (window.innerHeight/2)) {
    // do something with image classes
  } else {
    // do something else
  }
}

出于性能原因，我建议将事件监听器放在Timeout中。

Answer 3

我认为你会坚持你当前的实现，即隐藏span个元素直到徘徊。

您可以使用

获取每个元素的y位置

elem.getBoundingClientRect().top

返回页面顶部的距离。

您可以使用window.innerHeight获取窗口的高度。

因此，如果每个元素的顶部位置大于窗口高度的一半，则只需检查每个元素

elem.getBoundingClientRect().top > window.innerHeight/2

如果上述情况属实，那么您可以为元素分配一个类以显示在链接标题上方，但老实说，有很多方法可以完成同样的事情。

所以，假设您想要在标题上方添加一个类以显示在标题上方，您可以执行相对定位它们并添加负top css值或我要做的是使用css3转换

.above {
  transform: translate(0, -100%);
}

这样你不需要再猜测跨度的高度，因为css变换使用目标元素的尺寸而不是父容器。

要记住的另一件事是，为了将脚本负载保持在最低限度，您可能需要检查span事件监听器中onhover元素的位置，在DOM准备就绪时不检查所有这些跨度，因为它们将暂停呈现，直到脚本准备就绪并使页面无响应。

Answer 4

假设你已经了解了event.target，window.innerHeight和event.clientY，使用position：fixed和相对于目标位置的定位是一种方法。

基于光标的Y位置将CSS类添加到DIV

4 个答案: