Question

我现在找不到例子。

我想将我的图像作为div中的背景图像来改变鼠标的位置，如果可能的话，可以通过移动来移动。

默认情况下应显示两个图像，第一个图像的50％，第二个图像的50％。

然后，当用户将鼠标悬停在图像上时，一个图像将根据鼠标位置覆盖另一个图像。例如，当用户鼠标悬停在图像上时，比如水平刻度为0.3时，他会看到第一张图像的30％和第二张图像的70％。

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

Answer 1

有点难以理解你的意思：

默认情况下应显示两个图像，第一个图像的右侧为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%";）。

Answer 2

你的意思是这样吗？

$(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(http://backgrounds.mysitemyway.com/wp-content/uploads/2009/03/nightlights-000882-gradient-dark-blue-300x300.jpg);
  z-index: 1;
  background-size:cover;
  border-right: 1px solid black;
}
.image2{
  height: 100%;
  position: absolute;
  width: 100%;
  background-position: right;
  background-image: url(http://backgrounds.mysitemyway.com/wp-content/uploads/2009/03/swirly-flowers-000761-orange-red-dark-orchid-300x300.jpg);
  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>

我还包括（作为注释行）设置计算新宽度的间隔的能力。这也很有用。

根据鼠标位置在两个图像之间切换

2 个答案: