我暂时找不到示例。
我希望我的图像在 div 中定位为背景图像，以随着鼠标的位置而改变，如果可能的话，随着移动设备的滑动而改变。
默认情况下应显示两张图片，第一张图片的左侧为 50%，第二张图片的右侧为 50%。
然后，当用户将鼠标悬停在图像上时，一个图像会根据鼠标位置覆盖另一个图像。例如，当用户将鼠标悬停在图像上时，例如水平刻度为 1 上的 0.3，他会看到第一张图像的左侧 30% 和第二张图像的 70%。
这种过渡应该是平滑的，如果有意义的话，几乎可以随着每个像素的变化而变化。
【问题讨论】：
标签： javascript jquery html css image
你的意思是这样的吗？
$(function(){
var containerWidth = 190;
// var intervalFlag = false;
// var updateIntervalFlag;
$(".cover").mouseenter(function(){
$(".image1").css("transition", "initial");
// updateIntervalFlag = setInterval(() => intervalFlag = true, 25);
});
$(".cover").mousemove(function(e){
// if(intervalFlag){
// intervalFlag = false;
var cursorX = e.clientX - $(this).offset().left;
var percentage = cursorX/containerWidth * 100;
$(".image1").css("width", percentage + "%");
// }
});
$(".cover").mouseleave(function(){
$(".image1").css("transition", "width 0.3s");
$(".image1").css("width", "50%");
// clearInterval(updateIntervalFlag);
});
});body{
background-color: #333;
}
.container{
margin: 0 auto;
width: 190px;
height: 190px;
position: relative;
background-color: #333;
box-shadow: 0px 0px 50px -3px black;
}
.image1{
height: 100%;
position: absolute;
width: 50%;
background-image: url(https://via.placeholder.com/300/0000FF/808080?text=left);
z-index: 1;
background-size:cover;
border-right: 1px solid black;
}
.image2{
height: 100%;
position: absolute;
width: 100%;
background-position: right;
background-image: url(https://via.placeholder.com/300/000000/FFFFFF?text=right);
background-size:cover;
}
.cover{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<span class="image1"></span>
<span class="image2"></span>
<div class="cover"></div>
</div>
</body>我还包括（作为注释行）设置计算新宽度的间隔的能力。这也很有用。
【讨论】：
有点难以理解你的意思：
默认情况下应显示两张图片，第一张图片的左侧 50% 和右侧 50% 秒。当用户将鼠标悬停在图像上时，例如 x 轴上的 0.3 1，他看到了第一张图像的 30% 和第二张图像的 70%。
但我想你可以创建一个适合你需要的 JS 函数，并使用 onmouseover/onmousedown/... 将其注册到相应的 HTML 元素中。
编辑：
啊，我想我现在明白了。使用 onmousemove，从事件中获取鼠标位置，相应地计算两个图像的新宽度并通过 DOM 访问设置它们（例如document.getElementById("img1").style.width="30%";，document.getElementById("img2").style.width="70%";）。
【讨论】：