Javascript 根据鼠标位置在两个图像之间进行更改

我现在找不到榜样

我希望我的图像在div中作为背景图像定位，以随着鼠标位置的变化而变化，如果可能的话，可以通过滑动移动来改变

默认情况下应显示两个图像，第一个图像的左侧50%，第二个图像的右侧50%

然后，当用户将鼠标移到图像上时，一个图像会根据鼠标位置覆盖另一个图像。例如，当用户将鼠标移到图像上时，例如，水平比例为1的0.3，他看到第一个图像的左30%和第二个图像的70%

---

这种过渡应该是平滑的，如果有意义的话，几乎每一个像素都会发生变化。

很难理解你的意思：

默认情况下，应显示两个图像，第一个图像的左50%和右50% 50%的秒。当用户鼠标在图像上移动时，比如说，x轴上的0.3 在1中，他看到左30%的第一幅图像和70%的第二幅图像

但是我想您可以创建一个适合您需要的JS函数，并使用onmouseover/onmousedown/将其注册到相应的HTML元素中。。。不管你想做什么

编辑：

---

啊，我想我现在明白了。使用onmousemove，从事件中获取鼠标位置，相应地计算两个图像的新宽度，并通过DOM访问设置它们，例如document.getElementByIdimg1.style.width=30%；，document.getElementByIdimg2.style.width=70%

你的意思是这样的吗

$function{ var containerWidth=190； //var intervalFlag=false； //var-updateIntervalFlag； $.cover.mouseenterfunction{ $.image1.cs转换，首字母； //updateIntervalFlag=setInterval=>intervalFlag=true，25； }; $.cover.mousemove函数{ //iIntervalFlag{ //intervalFlag=假； var cursorX=e.clientX-$this.offset.left； var百分比=游标/集装箱宽度*100； $.image1.csswidth，百分比+%； // } }; $.cover.mouseleave函数{ $.image1.cs转换，宽度0.3s； $.image1.csswidth，50%； //ClearIntervaluUpdateIntervalFlag； }; }; 身体{ 背景色：333； } .集装箱{ 保证金：0自动； 宽度：190px； 高度：190px； 位置：相对位置； 背景色：333； 盒影：0px 0px 50px-3px黑色； } .image1{ 身高：100%； 位置：绝对位置； 宽度：50%； 背景图像：urlhttps://via.placeholder.com/300/0000FF/808080?text=left; z指数：1； 背景尺寸：封面； 右边框：1px纯黑； } .image2{ 身高：100%； 位置：绝对位置； 宽度：100%； 背景位置：右； 背景图像：urlhttps://via.placeholder.com/300/000000/FFFFFF?text=right; 背景尺寸：封面； } .掩护{ 位置：绝对位置； 左：0px； 顶部：0px； 宽度：100%； 身高：100%； z指数：999； }

---

谢谢，我试着解释得更清楚些。主要的问题是基于鼠标位置的平稳过渡，我没有找到实现这一点的方法，也许有人可以给我指出正确的方向。为什么每个投票的人都投票否决了我的问题？我应该对此进行任何更改吗？我无法用不同的关键词在谷歌上找到我的问题的答案，所以我不认为这很愚蠢，可能会帮助很多其他人