0

我有 2 张图像相互重叠。我想要实现的是使用鼠标滚动/鼠标滚轮来更改剪贴蒙版，以显示下面的图层。

CSS：

html {
    overflow: hidden; /* prevent overscroll */
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    overflow: auto;
    height: 100%;
}
#slideshow {
    position: relative;
    width: 100%;
    top: 0;
    display: table;
}
#slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

JS：

$(document).ready(function() {
    var w = $('#slideshow').width();
    var h = $('#slide1').height();
    var lastScrollX = 0;
    $('#slideshow').on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollX) {
            console.log('scroll up');
        } else if(st < lastScrollX) {
            console.log('scroll down');
        }
        lastScrollX = st;
    });
    var offsetX = 0;
    $(document).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        d = -e.originalEvent.wheelDelta;
        if(offsetX + d < w && offsetX + d >= 0) {
            offsetX += d;
        } else if(offsetX + d >= w) {
            offsetX = w;
        } else if(offsetX +d < 0) {
            offsetX = 0;
        }
        if(offsetX > w / 2) {
            // animate offsetX till w... but how?

        } else {
            $('#slide1').css('-webkit-clip-path', 'inset(0 ' + offsetX + 'px 0 0)');
            $('#slide1').css('clip-path', 'inset(0 ' + offsetX + 'px 0 0)');
        }
    });
});

HTML：

<div id="slideshow">
    <img id="slide5" src="img/banner5.jpg" alt="" />
    <img id="slide4" src="img/banner4.jpg" alt="" />
    <img id="slide3" src="img/banner3.jpg" alt="" />
    <img id="slide2" src="img/banner2.jpg" alt="" />
    <img id="slide1" src="img/banner1.jpg" alt="" />    
</div>

不知何故，JSFiddle无法处理这种情况。

问题：如何使用 jQueryoffsetX为全宽设置动画？w

我使用clip-path而不是clip因为后者的属性已被弃用。

4

0 回答 0