【发布时间】：2019-06-13 16:17:40
【问题描述】：
我有这个比较功能，允许用户左右滑动查看前后图像。
一切正常（从 codepen 获得代码）。
虽然有一个问题，我想在图像的左侧和右侧有一个文本（没问题），当用户向左滑动时，我希望左侧文本（当前显示为“文本左侧”）消失当滑块接近“Text Left”块时，当滑块远离“Text Left”块时再次出现，“Text Right”块的功能也相同。
有人知道我该怎么做吗？你可以在这里查看代码。 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');
});
}
干杯
【问题讨论】：
标签： javascript jquery css