将jQuery包含到一个容器/部分/目录中

Question

我正在为我的Cargo Collective站点插入并测试一些jQuery：

https://lisle.cargo.site/

基本上，我一直在玩弄这个我喜欢的鼠标跟踪jQuery效果，但我不能让脚本停留在站点的一个部分中。当您向下滚动页面时，图像在整个过程中一直跟随鼠标。

下面是当前代码。

理想情况下，我希望效果只包含在顶部的VH/VW上，然后在用户通过容器的滚动点时脱离。我试过用div标签包装，然后调整高度等等，但都没有用。

任何帮助都将一如既往地受到真诚的感谢。谢谢大家，希望你们都平安无事。

我

​

$(document).on("mousemove", function(event) {
  $("img.lisle").css("width", event.pageX)
  $("img.lisle").css("height", event.pageY)

  $("img.stroke").css("width", $(window).width() - event.pageX)
  $("img.stroke").css("height", event.pageY)
})

img {
  position: absolute;
  width: 100%;
  height: 100v%;
}

img. lisle {
  top: 0 !important;
  left: 0 !important;
}

img.stroke {
  top: 0 !important;
  right: 0 !important;
}

​

Answer 1

uff弄坏了我的显示器:D，像这样试试。但是将唯一的id添加到元素中。

$('.page_container').on("mousemove", function(event) {
  $("img.lisle").css("width", event.pageX)
  $("img.lisle").css("height", event.pageY)

  $("img.stroke").css("width", $(window).width() - event.pageX)
  $("img.stroke").css("height", event.pageY)
})

Answer 2

在html文件中：

....

然后在jquery文件上：

$("#onMouseMove").on("mousemove", function(event) {....}