英文:
Image comparison slider with diagonal handle
问题
我需要制作一个图像比较滑块，通常的滑块上有两个图像和一个手柄，允许你显示/隐藏这些图像。就像这个例子一样：https://codyhouse.co/demo/image-comparison-slider/index.html
不同之处在于手柄必须是垂直的，但不是完全垂直的，它必须有一个角度，就像下面的图片一样。然后它是水平拖动的。你会如何实现这个？
英文:
I need to make an image comparison slider, the usual slider where you have two images and a handle that allows you to show/hide the images.
Like this one for example https://codyhouse.co/demo/image-comparison-slider/index.html
The twist is that the handle must be vertical, but not perfectly vertical, it must have an angle, like in the image below. Then it's dragged horizontally. How would you achieve this?
答案1
得分: 1
考虑以下内容。
JavaScript
$(function() {
function makeClip(width, height, mid) {
//left, top
var half = 50;
var coords = [
[0, 0],
[mid + half, 0],
[mid - half, height],
[0, height]
];
return coords;
}
function setClipStyle(target, left) {
var coords = makeClip($(target).width(), $(target).height(), left);
console.log(coords);
var parts = [];
parts.push(coords[0][0] + "px " + coords[0][1] + "px");
parts.push(coords[1][0] + "px " + coords[1][1] + "px");
parts.push(coords[2][0] + "px " + coords[2][1] + "px");
parts.push(coords[3][0] + "px " + coords[3][1] + "px");
var style = 'polygon(' + parts.join(",") + ')';
console.log(style);
$(target).data("mid", left).css("clipPath", style);
}
setClipStyle(".img-over img", 300);
$(".slide-handle").draggable({
axis: "x",
containment: [-20, 0, 580, 0],
drag: function(e, ui) {
setClipStyle(".img-over img", ui.position.left + 30);
}
});
});
这会操纵具有 clip-path 的图像的CSS。您需要检查浏览器兼容性。我还使用了jQuery UI来更容易地处理拖动操作。
参考资料：
- https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
- https://api.jqueryui.com/draggable/
- https://css-tricks.com/almanac/properties/c/clip-path/
英文:
Consider the following.
https://jsfiddle.net/Twisty/jzeo4xsm/82/
JavaScript
$(function() {
function makeClip(width, height, mid) {
//left, top
var half = 50;
var coords = [
[0, 0],
[mid + half, 0],
[mid - half, height],
[0, height]
];
return coords;
}
function setClipStyle(target, left) {
var coords = makeClip($(target).width(), $(target).height(), left);
console.log(coords);
var parts = [];
parts.push(coords[0][0] + "px " + coords[0][1] + "px");
parts.push(coords[1][0] + "px " + coords[1][1] + "px");
parts.push(coords[2][0] + "px " + coords[2][1] + "px");
parts.push(coords[3][0] + "px " + coords[3][1] + "px");
var style = 'polygon(' + parts.join(",") + ')';
console.log(style);
$(target).data("mid", left).css("clipPath", style);
}
setClipStyle(".img-over img", 300);
$(".slide-handle").draggable({
axis: "x",
containment: [-20,0,580,0],
drag: function(e, ui) {
setClipStyle(".img-over img", ui.position.left + 30);
}
});
});
This manipulates the CSS of the Image with clip-path. You will need to check on Browser Compatibility. I also used jQuery UI to make it easier to address Drag operations.
References:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论