含jQuery成一container/section/div

Question

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

https://lisle.cargo.site/

基本上我一直在玩我喜欢的这种鼠标跟踪 jQuery 效果，但我无法将脚本保留在站点的一个部分中。当您向下滚动页面时，图像会一直跟随鼠标移动。

当前代码如下。

理想情况下，我希望效果仅包含在顶部 VH/VW，然后在用户通过容器的滚动点时解除。我试过用 div 标签包装，然后调整高度等但无济于事.....

我们将一如既往地真诚地感谢您的帮助。谢谢大家，希望你们都平安。

L

$(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;
}

<img src="https://freight.cargo.site/t/original/i/52942d135a28c76f77ec1127ef9a8d14d2df813d5f16575bdd381101d8097937/LisleA_Stretch.png" class="lisle" style="width: 1432px; height: 846px;">

<img src="
    https://freight.cargo.site/t/original/i/0292f819549959a5b1390d6d3c07c7853f8e95782e81450d62250dfd0b912a3e/test-stroke.png" class="stroke" style="width: 88px; height: 846px;">

Answer 1

在 html 文件中：

<div id="onMouseMove">....</div>

然后在 jquery 文件上：

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

Answer 2

我的显示器坏了 :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)
})

含jQuery成一container/section/div

Containing jQuery into one container/section/div

html

css

jquery

responsive