jQuery(document).ready(function($) {
var dragging = false,
scrolling = false,
resizing = false;
//cache jQuery objects
var imageComparisonContainers = $('.cd-image-container');
//check if the .cd-image-container is in the viewport
//if yes, animate it
checkPosition(imageComparisonContainers);
$(window).on('scroll', function() {
if (!scrolling) {
scrolling = true;
(!window.requestAnimationFrame) ?
setTimeout(function() {
checkPosition(imageComparisonContainers);
}, 100): requestAnimationFrame(function() {
checkPosition(imageComparisonContainers);
});
}
});
//make the .cd-handle element draggable and modify .cd-resize-img width according to its position
imageComparisonContainers.each(function() {
var actual = $(this);
drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-image-label[data-type="modified"]'));
});
//upadate images label visibility
$(window).on('resize', function() {
if (!resizing) {
resizing = true;
(!window.requestAnimationFrame) ?
setTimeout(function() {
checkLabel(imageComparisonContainers);
}, 100): requestAnimationFrame(function() {
checkLabel(imageComparisonContainers);
});
}
});
function checkPosition(container) {
container.each(function() {
var actualContainer = $(this);
if ($(window).scrollTop() + $(window).height() * 0.5 > actualContainer.offset().top) {
actualContainer.addClass('is-visible');
}
});
scrolling = false;
}
function checkLabel(container) {
container.each(function() {
var actual = $(this);
updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');
updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');
});
resizing = false;
}
//draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
dragElement.on("mousedown vmousedown", function(e) {
dragElement.addClass('draggable');
resizeElement.addClass('resizable');
var dragWidth = dragElement.outerWidth(),
xPosition = dragElement.offset().left + dragWidth - e.pageX,
containerOffset = container.offset().left,
containerWidth = container.outerWidth(),
minLeft = containerOffset + 10,
maxLeft = containerOffset + containerWidth - dragWidth - 10;
dragElement.parents().on("mousemove vmousemove touchmove", function(e) {
if (!dragging) {
dragging = true;
(!window.requestAnimationFrame) ?
setTimeout(function() {
animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);
}, 100): requestAnimationFrame(function() {
animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);
});
}
}).on("mouseup vmouseup", function(e) {
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
e.preventDefault();
}).on("mouseup vmouseup", function(e) {
dragElement.removeClass('draggable');
resizeElement.removeClass('resizable');
});
}
function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {
var leftValue = e.pageX + xPosition - dragWidth;
//constrain the draggable element to move inside his container
if (leftValue < minLeft) {
leftValue = minLeft;
} else if (leftValue > maxLeft) {
leftValue = maxLeft;
}
var widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + '%';
$('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {
$(this).removeClass('draggable');
resizeElement.removeClass('resizable');
});
$('.resizable').css('width', widthValue);
updateLabel(labelResizeElement, resizeElement, 'left');
updateLabel(labelContainer, resizeElement, 'right');
dragging = false;
}
function updateLabel(label, resizeElement, position) {
if (position == 'left') {
(label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth()) ? label.removeClass('is-hidden'): label.addClass('is-hidden');
} else {
(label.offset().left > resizeElement.offset().left + resizeElement.outerWidth()) ? label.removeClass('is-hidden'): label.addClass('is-hidden');
}
}
});/* SLIDER CSS */
img {
max-width: 100%;
}
.cd-image-container {
position: relative;
width: 100%;
margin: 0em auto;
}
.cd-image-container img {
display: block;
}
.cd-image-label {
position: absolute;
top: 0;
right: 0;
color: #000000;
padding: 5px 10px;
font-size: 10px;
margin: 5px 35px 0 35px;
background: rgba(255, 255, 255, .7);
font-weight: bold;
-webkit-font-smoothing: antialiased;
font-family: 'AudiTypeExtendedNormal', Verdana, Arial, Helvetica, sans-serif;
-moz-osx-font-smoothing: grayscale;
opacity: 0;
}
.cd-image-label.is-hidden {
/*visibility: hidden;*/
opacity: 0;
}
.is-visible .cd-image-label {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.cd-resize-img {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
overflow: hidden;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-right: solid 1px #dedede;
}
.cd-resize-img img {
position: absolute;
left: 0;
top: 0;
display: block;
height: 100%;
width: auto;
max-width: none;
}
.cd-resize-img .cd-image-label {
right: auto;
left: 0;
}
.is-visible .cd-resize-img {
width: 50%;
/* bounce in animation of the modified image */
-webkit-animation: cd-bounce-in 0.7s;
-moz-animation: cd-bounce-in 0.7s;
animation: cd-bounce-in 0.7s;
}
@-webkit-keyframes cd-bounce-in {
0% {
width: 0;
}
60% {
width: 55%;
}
100% {
width: 50%;
}
}
@-moz-keyframes cd-bounce-in {
0% {
width: 0;
}
60% {
width: 55%;
}
100% {
width: 50%;
}
}
@keyframes cd-bounce-in {
0% {
width: 0;
}
60% {
width: 55%;
}
100% {
width: 50%;
}
}
.cd-handle {
position: absolute;
height: 22px;
width: 44px;
/* center the element */
left: 50%;
top: 55%;
margin-left: -22px;
margin-top: -22px;
background: #000000 url("https://images.clickfunnels.com/09/a714400d3211e7a0bd7d7140585054/cd-arrows.svg") no-repeat center center;
cursor: move;
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(0);
-moz-transform: translate3d(0, 0, 0) scale(0);
-ms-transform: translate3d(0, 0, 0) scale(0);
-o-transform: translate3d(0, 0, 0) scale(0);
transform: translate3d(0, 0, 0) scale(0);
z-index: 300;
}
.cd-handle.draggable {
/* change background color when element is active */
background-color: #3a3a3a;
}
.is-visible .cd-handle {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
-moz-transform: translate3d(0, 0, 0) scale(1);
-ms-transform: translate3d(0, 0, 0) scale(1);
-o-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
-webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
-moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<figure class="cd-image-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/marioPhoto-2.jpg" alt="Original Image">
<span class="cd-image-label" data-type="original"></span>
<div class="cd-resize-img">
<!-- the resizable image on top -->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/marioPhoto-1.jpg" alt="Modified Image">
<span class="cd-image-label" data-type="modified"></span>
</div>
<span class="cd-handle"></span>
</figure>
我正在将JS插件用于图像比较滑块，并且该插件的构建方式使其只能在桌面上使用。我知道需要触摸事件才能使移动设备上的体验更好，并且我不确定要在代码中进行哪些更新才能实现此目的。
我尝试使用mousemove，vmousemove和touchmove失败。请帮忙！