javascript - 比较函数 : How can I hide the text when user slide to left or right of the comparison slider

Question

我有这个比较功能，允许用户左右滑动查看前后图像。

一切正常(从 codepen 获取代码)。

但有一个问题，我希望在图像的左侧和右侧有一个文本(没问题)，当用户向左滑动时，我希望左侧文本(当前显示为“Text Left”)消失当 slider 接近“Text Left” block 时，当 slider 远离“Text Left” block 时再次出现，“Text Right” block 也具有相同的功能。

有人知道我该怎么做吗？您可以在此处查看代码。 https://codepen.io/drstrangelovesg/pen/Kjpevp

提前谢谢你们。

$(document).ready(function () {
    $('.ba-slider').each(function () {
        var cur = $(this);
        // Adjust the slider
        var width = cur.width() + 'px';
        cur.find('.resize img').css('width', width);
        // Bind dragging events
        drags(cur.find('.handle'), cur.find('.resize'), cur);
    });
});

// Update sliders on resize. 
$(window).resize(function () {
    $('.ba-slider').each(function () {
        var cur = $(this);
        var width = cur.width() + 'px';
        cur.find('.resize img').css('width', width);
    });
});

function drags(dragElement, resizeElement, container) {

    // Initialize the dragging event on mousedown.
    dragElement.on('mousedown touchstart', function (e) {

        dragElement.addClass('draggable');
        resizeElement.addClass('resizable');

        // Check if it's a mouse or touch event and pass along the correct value
        var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;

        // Get the initial position
        var dragWidth = dragElement.outerWidth(),
            posX = dragElement.offset().left + dragWidth - startX,
            containerOffset = container.offset().left,
            containerWidth = container.outerWidth();

        // Set limits
        minLeft = containerOffset + 10;
        maxLeft = containerOffset + containerWidth - dragWidth - 10;

        // Calculate the dragging distance on mousemove.
        dragElement.parents().on("mousemove touchmove", function (e) {

            // Check if it's a mouse or touch event and pass along the correct value
            var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX;

            leftValue = moveX + posX - dragWidth;

            // Prevent going off limits
            if (leftValue < minLeft) {
                leftValue = minLeft;
            } else if (leftValue > maxLeft) {
                leftValue = maxLeft;
            }

            // Translate the handle's left value to masked divs width.
            widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + '%';

            // Set the new values for the slider and the handle. 
            // Bind mouseup events to stop dragging.
            $('.draggable').css('left', widthValue).on('mouseup touchend touchcancel', function () {
                $(this).removeClass('draggable');
                resizeElement.removeClass('resizable');
            });
            $('.resizable').css('width', widthValue);
        }).on('mouseup touchend touchcancel', function () {
            dragElement.removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
        e.preventDefault();
    }).on('mouseup touchend touchcancel', function (e) {
        dragElement.removeClass('draggable');
        resizeElement.removeClass('resizable');
    });
}

干杯

Answer 1

如果 slider 达到最大值，标签将被隐藏，否则显示为 block

if (leftValue === minLeft)
  document.getElementById("leftElement").style.display = 'none';
else      
  document.getElementById("leftElement").style.display = 'block';`

出于演示目的，我将最大值和最小值更改为 +- 80，以便更加明显。

$(document).ready(function() {
  $(".ba-slider").each(function() {
    var cur = $(this);
    // Adjust the slider
    var width = cur.width() + "px";
    cur.find(".resize img").css("width", width);
    // Bind dragging events
    drags(cur.find(".handle"), cur.find(".resize"), cur);
  });
});

// Update sliders on resize.
$(window).resize(function() {
  $(".ba-slider").each(function() {
    var cur = $(this);
    var width = cur.width() + "px";
    cur.find(".resize img").css("width", width);
  });
});

function drags(dragElement, resizeElement, container) {
  // Initialize the dragging event on mousedown.
  dragElement
    .on("mousedown touchstart", function(e) {
      dragElement.addClass("draggable");
      resizeElement.addClass("resizable");

      // Check if it's a mouse or touch event and pass along the correct value
      var startX = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX;

      // Get the initial position
      var dragWidth = dragElement.outerWidth(),
        posX = dragElement.offset().left + dragWidth - startX,
        containerOffset = container.offset().left,
        containerWidth = container.outerWidth();

      // Set limits
      minLeft = containerOffset + 80;
      maxLeft = containerOffset + containerWidth - dragWidth - 80;
   

      // Calculate the dragging distance on mousemove.
      dragElement
        .parents()
        .on("mousemove touchmove", function(e) {
          // Check if it's a mouse or touch event and pass along the correct value
          var moveX = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX;

          leftValue = moveX + posX - dragWidth;

          // Prevent going off limits
          if (leftValue <= minLeft) {
            leftValue = minLeft;
          } else if (leftValue > maxLeft) {
            leftValue = maxLeft;
          }
        
          if (leftValue === minLeft)
             document.getElementById("leftElement").style.display = 'none';
          else      
             document.getElementById("leftElement").style.display = 'block';
        
         if (leftValue === maxLeft)
            document.getElementById("rightElement").style.display = 'none';
         else      
            document.getElementById("rightElement").style.display = 'block';
      
        

          // Translate the handle's left value to masked divs width.
          widthValue =
            (leftValue + dragWidth / 2 - containerOffset) *
              100 /
              containerWidth +
            "%";

          // Set the new values for the slider and the handle.
          // Bind mouseup events to stop dragging.
          $(".draggable")
            .css("left", widthValue)
            .on("mouseup touchend touchcancel", function() {
              $(this).removeClass("draggable");
              resizeElement.removeClass("resizable");
            });
          $(".resizable").css("width", widthValue);
        })
        .on("mouseup touchend touchcancel", function() {
          dragElement.removeClass("draggable");
          resizeElement.removeClass("resizable");
        });
      e.preventDefault();
    })
    .on("mouseup touchend touchcancel", function(e) {
      dragElement.removeClass("draggable");
      resizeElement.removeClass("resizable");
    });
}

.rinse-away-container {
  margin-bottom: 8rem;
}
@media (min-width: 768px) {
  .rinse-away-container {
    margin-bottom: 10rem;
  }
}
@media (min-width: 992px) {
  .rinse-away-container {
    margin-bottom: 15rem;
  }
}
.ba-slider {
  position: relative;
  overflow: hidden;
  max-width: 1045px;
  margin: 5rem auto 0;
}
.ba-slider img {
  width: 100%;
  display: block;
}
.ba-slider .label-left,
.ba-slider .label-right {
  position: absolute;
  bottom: 0;
  z-index: 2;
  padding: 1rem;
  color: white;
}
.ba-slider .label-right {
  right: 0;
}
.resize {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
}
.handle {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -2px;
  background: #fff;
  cursor: ew-resize;
}

.handle:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 64px;
  margin: -32px 0 0 -5px;
  content: "";
  color: white;
  text-align: center;
  background: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.draggable:after {
  width: 30px;
  height: 64px;
  margin: -32px 0 0 -15px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title></title>
</head>

<body>
  <div class="rinse-away-container">
    <div class="container rinse-away-content">
      <div class="compare-image-container">
        <div class="ba-slider">
          <img src="https://i.ibb.co/8cC5xQh/test1.png" alt="Test 1">
          <div id="leftElement" class="label-left">Text Left</div>
          <div class="resize">
            <img src="https://i.ibb.co/FkQQJ8j/test2.png" alt="Test 2">
          </div>
          <div id="rightElement" class="label-right">Text Right</div>
          <span class="handle"></span>
        </div>
      </div>
    </div>
  </div>

  <!-- JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>

</html>