比较滑块 – 如何使鼠标位置以相反的方式操作？
Posted
技术标签:
【中文标题】比较滑块 – 如何使鼠标位置以相反的方式操作？【英文标题】：Comparison slider – How do I make the mouse position operate the opposite way? 【发布时间】：2021-08-29 22:15:15 【问题描述】：我正在尝试制作一个响应 mouseX 位置的着陆页比较滑块， 但我希望滑块移动鼠标位置的相反方向。 关于如何实现这一点的任何建议？
演示： https://jsfiddle.net/uw5v94qf/
所以基本上，就像演示所示，在我的例子中，滑块跟随鼠标位置。 但我希望它做相反的事情（？），即显示鼠标悬停的当前幻灯片。鼠标向边缘移动的越多，它显示的特定幻灯片就越多。
(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>【问题讨论】：
【参考方案1】：其实这个小调整就可以了
var mouseX = $(window).width() - e.pageX ;
您将 mouseX 分配为从窗口宽度中减去的正常值 (e.pageX)
https://jsfiddle.net/kinglish/fb28Lmzg/5/
【讨论】：
谢谢@Kinglish，成功了！ ?以上是关于比较滑块 – 如何使鼠标位置以相反的方式操作？的主要内容，如果未能解决你的问题，请参考以下文章