如何使用jQuery中的滚动条在对角线位置一张一张地滑动图像?

时间:2019-05-06 11:42:35

标签: javascript jquery

我可以在对角线位置显示图像,但是所有图像都一起滑动。我想要的是,我想在对角线位置一张一张地滑动图像。请在下面查看我的代码,并检查是否可以解决我的问题? 有关更多信息,请检查此链接www.webflow.com。当您向下滚动页面时。您将在自定义构建部分中看到使用滚动条以对角线位置显示的图像。

<div id="block">
<ul>
<li>
<a>
<img src="images/Ecommerce/EC01@2x.png" alt="Ecommerce1" />
<img  src="images/Ecommerce/EC02@2x.png" alt="Ecommerce2" />
<img  src="images/Ecommerce/EC03@2x.png" alt="Ecommerce3" />
<img  src="images/Ecommerce/EC04@2x.png" alt="Ecommerce4" />
<img src="images/Ecommerce/EC05@2x.png" alt="Ecommerce3" />
<span>Ecommerce</span>
</a>
</li>
</ul>
</div>

    #block {
        position: relative;
        width: 200px;
        height: 250px;
        top: 200px;
        left: 50px;


    }

    <script>
    $(function(){
        var lastScrollYPos = 0;
        $(window).on('scroll', function(){
            var $this = $(this),
                $block = $('#block'),
                // retrieves the top and left coordinates
                position = $block.offset(),
                // X and Y factors allows to change the diagonal movement direction and
                // degree. Negative values inverts the direction.
                factorX = 1,
                factorY = 1,
                // retrieves current vertical scrolling position and calculate the
                // relative offset
                scrollYPos = $this.scrollTop(),
                offset = Math.abs(scrollYPos - lastScrollYPos),
                // mouse wheel delta is inverted respect to the direction, so we need to
                // normalize it against the direction
                direction = scrollYPos > lastScrollYPos ? -1 : 1,
                // calculates the new position. NOTE: if integers only are used for factors,
                // then `Math.floor()` isn't required.
                newTop = position.top + Math.floor(direction * offset * factorY),
                newLeft = position.left - Math.floor(direction * offset * factorX);

            // moves the block
            $block.offset({ top: newTop, left: newLeft });
            lastScrollYPos = scrollYPos;
        });
    });

    </script>

0 个答案:

没有答案