比较滑块 – 如何使鼠标位置以相反的方式运行？

Question

我正在尝试制作一个对 mouseX 位置做出反应的着陆页比较滑块，但我希望滑块向鼠标位置的相反方向移动。关于如何实现这一点有什么建议吗？

所以基本上，就像演示所示，在我的例子中，滑块跟随鼠标位置。但我希望它做相反的事情（？），即显示鼠标悬停的当前幻灯片。鼠标向边缘移动的越多，它显示的特定幻灯片就越多。

(function($){
$(function(){
  $('.before-wrapper').on( "mousemove", function(e) {
    var offsets = $(this).offset();
    var fullWidth = $(this).width();
    var mouseX = e.pageX - offsets.left;

    if (mouseX < 0) { mouseX = 0; }
    else if (mouseX > fullWidth) { mouseX = fullWidth }


    $(this).parent().find('.comparison-slider').css({
      left: mouseX,
      transition: 'ease-out'
    });
    $(this).find('.after-wrapper').css({
      transform: 'translateX(' + (mouseX) + 'px)',
      transition: 'all 1s'
    });
    $(this).find('.after-image').css({
      transform: 'translateX(' + (-1*mouseX) + 'px)',
      transition: 'all 1s'
    });
  });
  $('.slider-wrapper').on( "mouseleave", function() {
    $(this).parent().find('.comparison-slider').css({
      left: '50%',
      transition: 'all .3s'
    });
    $(this).find('.after-wrapper').css({
      transform: 'translateX(50%)',
      transition: 'all .3s'
    });
    $(this).find('.after-image').css({
      transform: 'translateX(-50%)',
      transition: 'all .3s'
    });
  });

});
})(jQuery);

body{
  margin:0;
  font-family: open sans;
}

.slider-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.slider-wrapper:hover { cursor: crosshair;; }

.comparison-slider {

}

.before-wrapper {
  display: block;
  overflow: hidden;
  width: auto;
  height: 100%;
  position: relative;
  background: url("#") no-repeat center center #111111;
  background-size: cover;
}

.before-wrapper:before {
  display: block;
  content: '';
  width: 100%;
  height:100%;

}

.after-wrapper, .after-image {

}

.after-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

.after-image {
  display: block;
  width: auto;
  height: 100%;
  position: relative;
-webkit-transform: translateX(-50%);
61
  transform: translateX(-50%);

  background: url("#") no-repeat center center #efefef;
  background-size: cover;



}

.past, .future{
  padding: 40px;
  color:#fff;
  text-transform:uppercase;
  font-size:20px;
  /* text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); */
  font-weight:800;
  z-index:10;
}

.past {
 position: absolute;
 display: block;
 bottom: 0px;
 left:0px;
 color:#111;
}

.you {
  width: 200px;
  height: 200px;
 position: absolute;
 display: block;
 right:0px;
 left: 0px;
 z-index:999;
 background: red;
}

.future {
 position: absolute;
 display: block;
 bottom: 0px;
 right:0px;
}

<body>
<!-- partial:index.partial.html -->
<div class="slider-wrapper">
  <div class="past">Interior</div>
  <div class="future">3D</div>
  <div class="before-wrapper">
    <div class="after-wrapper">

      <div class="after-image"></div>
    </div>
  </div>
  <div class="comparison-slider"></div>
</div>
<!-- partial -->
  <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script><script  src="./script.js"></script>

</body>
</html>

Answer 1

实际上这个小调整就可以解决问题

var mouseX = $(window).width() - e.pageX ;

您将 mouseX 指定为从 window 的宽度

中减去的正常值 (e.pageX)

https://jsfiddle.net/kinglish/fb28Lmzg/5/

比较滑块 – 如何使鼠标位置以相反的方式运行？

Comparison slider – How do I make the mouse position operate the opposite way?

javascript

comparison

jquery

slider

mousemove