本文總結分析了jQuery視差滾動效果網頁實現方法。分享給大家供大家參考，具體如下：

首先說兩個核心函數，當然是基于jQuery的：

1、$(document).scrollTop() ;

該函數主要是返回頁面當前頂部距離頁面頂部的像素值，是一個非負整數。

2、$(window).scroll();

該事件是監控頁面是否滾動，一旦滾動則觸發其回調函數。

由此兩個函數，我們得到下面的代碼：

$(window).scroll(function() {var top = $(document).scrollTop();if (top == 100) alert(top);});

以上代碼的意思是：當頁面滾動時，檢查當前頂部距離頁面起始之間的像素是否為100，是則彈出消息框。

當能判斷滾動的距離后，就可以進行其他的操作了。剩下的就是各種css的定位了。

在制作頁面的時候，我們要確定那些圖片是需要進行視差滾動的。對于每個圖片，我們都需要將CSS屬性定義為

position: absolute;

此刻該div會漂移到頁面的左上角，當然最好寫上 left: 0px; top: 0px;還有該div的寬度和高度，有必要的話，需要寫上overflow和background，所有的圖片都應該是png格式的，這個大家懂的。

設置好屬性后，就進行定位div的起始位置。也就是修改left和top，有必要的話可以修改right和bottom。

等以上工作完成后，就可以進行動畫設置了。

用到的函數就是css了，我是這樣設置的：

$('#text1').css('top', text1_top-parseInt(s_top)*0.15+'px');

以上代碼放在scroll()函數內，只要監測到頁面滾動就開始執行。其中 s_top 是當前的滾動距離，之前提到過。text1_top 是 $('#text1')的原始位置，且當頁面加載后，就需要讀取。一般用：

var text1_top = $('#text1').offset().top;

獲取，不能放在scroll()函數內。

現在就開始敘述視差滾動原理了：

當頁面加載完畢后，得到$('#text1')距離頁面頂部的高度，并賦值給text1_top。

當頁面滾動事件觸發后，執行 $('#text1').css('top', text1_top-parseInt(s_top)*0.15+'px') 語句，意思是：隨著頁面往下的滾動，將text1的頂部距離減去當前移動距離的0.15倍。也就是說頁面每往下移動100個像素，text1只往上移動15個像素，以此類推。這里的減號需要注意，如果是加號，那就是往下移動15個像素。換句話說，加號是同向，減號是反向。

當頁面滾動到某個距離后才進行觸發，我的寫法是判斷：

if (s_top > 200) {$('#text1').css('top', text1_top-parseInt(s_top - 200)*0.15+'px');}

當滾動距離到200像素時，運行后面的語句：這里有一個不同是s_top - 200，這里是基數從0開始算，如果沒有減200，那么這個基數就不是0，而是200。那么#text1的視差滾動也不會正確的。

最后，我想說一下offset函數，他的主要目的是確定當前元素所在的left和top的數值。我們之前說過用 position: absolute; 來進行div的設置，如果div沒有設置這個，但需要滾動的話，那么必須首先用offset函數確定某個元素的left和top后，用css函數首先賦值給需要定位的元素（一定要在設置position: absolute;之前），再設置該元素為 position: absolute; 這個也是需要在scroll()函數之外進行的。

編寫視差滾動頁面的時候，最大的體會就是要思路清晰，再次就是注意運行的順序，有時候需要用到回調函數。

需要有個相對安靜的環境去寫代碼，精神要放松，這樣效率才會更高，需要休息的時候就要休息，寫代碼時要一氣呵成。

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。