本文總結(jié)分析了jQuery視差滾動效果網(wǎng)頁實現(xiàn)方法。分享給大家供大家參考，具體如下：

首先說兩個核心函數(shù)，當(dāng)然是基于jQuery的：

1、$(document).scrollTop() ;

該函數(shù)主要是返回頁面當(dāng)前頂部距離頁面頂部的像素值，是一個非負(fù)整數(shù)。

2、$(window).scroll();

該事件是監(jiān)控頁面是否滾動，一旦滾動則觸發(fā)其回調(diào)函數(shù)。

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

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

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

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

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

position: absolute;

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

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

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

用到的函數(shù)就是css了，我是這樣設(shè)置的：

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

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

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

獲取，不能放在scroll()函數(shù)內(nèi)。

現(xiàn)在就開始敘述視差滾動原理了：

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

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

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

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

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

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

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

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

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

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

最新評論