定義一個header的ID標記，然后下面有個四個導航，用于切換的

2 – 一些CSS代碼

創(chuàng)建一個新的CSS文件 ，把它定義成layout.css

/*** Style Definitions ***/  html                { background:#67b2ff; font-family:Arial, Helvetica, sans-serif; }       /*** Header ***/  h1#logo                { background:url(../images/Logo.png) top left no-repeat; height:62px; width:481px;                           text-indent:-9999px; position:absolute; top:10px; left:10px; }       #menu                { float:right; position:absolute; top:20px; right:10px; z-index:10; }       #menu a                { background:#FFF; color:#67b2ff; border:#AAA 3px solid;  text-decoration:none; padding:10px;                           margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}       #menu a:hover        { background:#67b2ff; color:#FFF; border:#FFF 3px solid; text-decoration:none; padding:10px;                           margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}       #menu li            { float:left; }       /*** Body Content ***/  #wrapper    { width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; }       #mask        { width:400%; height:100%; }       .box        { width:25%; height:100%; float:left; }       .content    { width:960px; height:400px; top:20%; margin: 0 auto; position:relative; background:rgba(255,255,255, 0.3);                   border-radius:35px; -moz-border-radius:35px; -webkit-border-radius:35px; }       .inner        { width:920px; height:360px; background:rgba(255, 255, 255, 0.3); border-radius:30px; -moz-border-radius:30px;                       -webkit-border-radius:30px; margin:5px; padding:15px; top:5px; position:relative; }

這些CSS代碼相信你能看到吧，我簡單解釋一下 ，我們把需要滾動的區(qū)域放在id為wrapper的DIV內(nèi)，無論他在那個地方一定要保證他滾動的固定性。id為mask的標記做為具體的滑動實現(xiàn)，他的寬度是100%，因為這里有4個區(qū)域需要全屏滾動，所以他的寬度設置為400。

我們想讓每個方形盒子在屏幕的中間，所以給每個方形盒子定義一個li元素哦。然后定義CSS3 border-radius圓角和rgba背景顏色來創(chuàng)建一個半透明的漂亮邊框圓角效果，到這里為止創(chuàng)建的效果如下所示。

第3步 - 使用jQuery來創(chuàng)建效果

上面基本的網(wǎng)站架構做好之后并沒有使用javascript，現(xiàn)在我們開始使用jquery創(chuàng)建有趣的滾動效果，我們使用ScrollTo的jquery插件來達到我們想要的效果，首先引入jquery文件。

然后打開這個文件看到最基本的jquery語法。

$(document).ready(function() {            $('a.link').click(function () {                $('#wrapper').scrollTo($(this).attr('href'), 800);              return false;            });        });

就這么簡單，看看這個代碼做個什么。

1，確保整個頁面加載之前運行腳本。

2 ，增加了點擊監(jiān)聽所有標簽。在這種情況下，這是我們的導航菜單中的所有鏈接，但我們可以添加“鏈接”類行為的任何頁面上的鏈接。然后，我們指定一個動作，點 擊檢測功能。

3 呼吁＃包裝的div的scrollTo插件，并傳遞給它的目的地，并以毫秒為單位的時間來完成動畫。

4取消點擊瀏覽器的默認行為。

現(xiàn)在我們知道如何滾動一個特定的div的內(nèi)容，讓我們在頭部背景增加自己的DIV內(nèi)容

增加CSS效果代碼

/*** Clouds ***/ .clouds        { width:100%; height:262px; overflow:hidden; }  #clouds-small    { width:3000px; height:100%; background:url(../images/bg-clouds-small.png) repeat-x;}  #cloud2        { position:relative; top:-262px; }  #clouds-big    { width:4000px; height:100%; background:url(../images/bg-clouds-big.png) repeat-x;}

上面的代碼，我增加了尺寸和背景圖片的div，全屏寬度，以適應滾動和定位，效果如下圖

第4步 - 完成所有的動作

我們幾乎完成了！之前，我使用了scrollTo插件來進行移動，我需要寫一個小的輔助功能，將告訴它移動定位到那個DIV。將有4點，我們需要設置，

function setPosition(check, div, p1, p2, p3, p4) {       if(check==='#box1')           {               $(div).scrollTo(p1, 800);           }       else if(check==='#box2')           {               $(div).scrollTo(p2, 800);           }       else if(check==='#box3')           {               $(div).scrollTo(p3, 800);           }       else           {               $(div).scrollTo(p4, 800);           }   };

$(document).ready(function() {         $('a.link').click(function () {             $('#wrapper').scrollTo($(this).attr('href'), 800);           //add this line           setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')           //end add this           return false;         });     });

到這里每個云將移動400個像素，看他們之間的差異像素大小

$(document).ready(function() {            $('a.link').click(function () {            $('#wrapper').scrollTo($(this).attr('href'), 800);          setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')          //add this line          setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')          //end add this          return false;        });    });

添加后續(xù)的云div，注意這里的div設置成800個像素了，這點需要大家注意

$(document).ready(function() {         $('a.link').click(function () {             $('#wrapper').scrollTo($(this).attr('href'), 800);           setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')           setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')           //add this           $('a.link').removeClass('selected');             $(this).addClass('selected');           //end add this           return false;         });     });

#menu a.selected {   background:#AAA;   color:#FFF;   border:#67b2ff 3px solid;   text-decoration:none;   padding:10px;  margin-right:10px;   border-radius:10px;   -moz-border-radius:10px;   -webkit-border-radius:10px;  }

以上就是jQuery中怎么實現(xiàn)視差滾動，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。