我可以在对角线位置显示图像,但是所有图像都一起滑动。我想要的是,我想在对角线位置一张一张地滑动图像。请在下面查看我的代码,并检查是否可以解决我的问题? 有关更多信息,请检查此链接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>