Question

我在hover上使用Javascript在导航时显示image。当我的导航列表溢出并需要可滚动时，会出现问题。 image将出现在顶部的类似位置，因此在打破干净功能的位置裁剪图像。我希望image始终显示在正确的文本旁边，并显示在文本下方。

要让它显示在我在#insertimage中插入html的文字下方，但我不确定我是否正确插入此内容，因为它最终会覆盖最后列出的项目或者我在开头插入它会覆盖它。

所以我在这里使用模板函数https://codepen.io/danoszz/pen/ORjGpa并将其修改为我的JSFiddle：https://jsfiddle.net/jhagmgxv/

如何实现这一目标？我是否必须跟踪列表的位置？我怎么能这样做？

function previewImages() {
  /* CONFIG */

  xOffset = 280;
  yOffset = 380;

  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result

  /* END CONFIG */

  $("a.imagereveal").hover(function(e) {

      var $this = $(this); // caching $(this)

      $("#insertimage").append("<div id='previewImage'><img src='" + this.rel + "' alt='rens preview image' />" + "</div>");

      $("#previewImage")
        .css("top", (e.pageY - xOffset) + "px")
        .css("left", (e.pageX + yOffset) + "px")
        .fadeIn("fast");
  },
  function() {
      $("#previewImage").remove();
  });

  $("a.screenshot").mousemove(function(e) {
    $("#previewImage")
      .css("top", (e.pageY - xOffset) + "px")
      .css("left", (e.pageX + yOffset) + "px");
  });
};

previewImages();

Answer 1

如果我理解正确，你的问题是当用户向下滚动时，翻转图像出现在框架之外... 要实现此目的，您需要知道用户向下滚动的像素数，而不是将此值添加到图像位置。

首先，我向可滚动内容中的元素添加了唯一ID ，我选择了第一个<div>元素中的第一个<a>，但它可能是另一个当然......

    <div class="nav-underline nav-title" id="checkScroll">
      Name
    </div>

比我在javascript中跟踪了元素滚动的像素数 #checkScroll

var scroll=$("#checkScroll").offset().top;

每次.hover事件触发时都要检查

比我将这些像素数减去图像的位置：

.css("top", (e.pageY - xOffset -scroll) + "px")
.css("left", (e.pageX + yOffset) + "px")

对于mi jsFiddle的短信目的，我将变量设置为：

  xOffset = 100;
  yOffset = 200;

通过这种方式，图像在例子中是清晰可见的;当然，它们必须符合您布局的需要。

https://jsfiddle.net/jhagmgxv/1/

将鼠标悬停在列出的项目文本

1 个答案: