jQuery垂直滾動以圖像爲中心

Question

不確定如何解釋我的頁面有5個圖像高度適合瀏覽器的高度。

我想讓用戶滾動頁面滾動條移動，但圖像保持水平居中。

而不是開始顯示下一張圖像的一半。

然後，當用戶向下移動像200px的滾動條時，圖像轉移到下一個和上一個圖像的下一個和相同的東西。

http://jsfiddle.net/Q66bF/

我甚至不知道從哪裏開始任何建議表示讚賞。

<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/

您可以在編輯theese jquery：

var scrollChange = 150; 
var scrollSpeed = 1000;