快捷導(dǎo)航

jQuery視差滾動(dòng)效果網(wǎng)頁實(shí)現(xiàn)方法經(jīng)驗(yàn)總結(jié)

更新時(shí)間：2016年09月29日 15:01:20 作者：山貓的博客

這篇文章主要介紹了jQuery視差滾動(dòng)效果網(wǎng)頁實(shí)現(xiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery滾動(dòng)效果的實(shí)現(xiàn)步驟、操作技巧及相關(guān)注意事項(xiàng),需要的朋友可以參考下

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

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

1、$(document).scrollTop() ;

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

2、$(window).scroll();

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

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

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

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

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

在制作頁面的時(shí)候，我們要確定那些圖片是需要進(jìn)行視差滾動(dòng)的。對(duì)于每個(gè)圖片，我們都需要將CSS屬性定義為

position: absolute;

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

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

等以上工作完成后，就可以進(jìn)行動(dòng)畫設(shè)置了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: