Question

不确定如何解释我有5张图片的页面，图片高度适合浏览器的高度。

我想说的是，当用户向下滚动页面滚动条移动但图像保持水平居中时。

而不是开始显示下一张图片的一半。

然后，当用户将滚动条移动到200px以下时，图像将转移到下一个和下一个和上一个图像相同的内容。

我甚至不知道从哪里开始任何建议表示赞赏。

<img src="http://upload.wikimedia.org/wikipedia/commons/d/d8/Manly_beach.jpg" />

<img src="http://upload.wikimedia.org/wikipedia/commons/6/6e/Black%27s_beach.jpg" />

<img src="http://apollojewel.com/wp-content/uploads/2013/03/South-Mission-Beach-800.jpg" />

<img src="http://fc09.deviantart.net/fs70/f/2011/223/9/b/boracay_beach_by_vaan37-d465ypo.jpg" />

<img src="http://www.kauaibeachscoop.com/cms/north-shore/hideaways-pali-ke-kau-beach/hideaways-beach-7-photo.jpg" />

<img src="http://cdn.tripwiremagazine.com/wp-content/uploads/2013/01/Piscadera-Bay-beach-wallpaper.jpg" />

Answer 1

您可以使用JavaScript和JQuery来检测页面滚动，并使用它来更改图像。我在下面创建了一个示例，使用提名订单的ID标记每个图像。

有更好的方法来实现这一点，但这是为了演示如何使用滚动高度。

你得到滚动高度如下：

$(document).scroll(function (e) {
    var scrolled = $(this).scrollTop();
}

以下演示：

http://jsfiddle.net/4KvUG/embedded/result/ 要么 http://jsfiddle.net/4KvUG

Answer 2

这是我制作的另一个小提琴http://jsfiddle.net/medda86/5G6Ry/

你可以在jquery中编辑theese：

var scrollChange = 150;
var scrollSpeed = 1000;

jQuery垂直滚动到图像中心

2 个答案: