日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jQuery實(shí)現(xiàn)的視差滾動教程

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運(yùn)動效果，帶來非常出色的視覺體驗(yàn)。作為今年網(wǎng)頁設(shè)計(jì)的熱點(diǎn)趨勢，越來越多的網(wǎng)站應(yīng)用了這項(xiàng)技術(shù)?，F(xiàn)在越來越多的網(wǎng)站采用視差水平滾動來創(chuàng)建絢麗的效果，其實(shí)這樣的效果使用jquery實(shí)現(xiàn)的，今天就給大家分享一下這樣的效果實(shí)現(xiàn)原理，下一次在做網(wǎng)站的時候你就可以使用這樣的效果作出絢麗的效果

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了尋甸免費(fèi)建站歡迎大家使用！

1 – 創(chuàng)建基本的html

首先創(chuàng)建最基本的html文件架構(gòu) ，這個就不多說了，代碼如下:

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.             Clouds demo
    3. 
  
  
  
  
  3.          
    4. 
  
  
  
  
  4.              
  5. Home
    6. 
  
  
  
  
  6.              
  7. Box 2
    8. 
  
  
  
  
  8.              
  9. Box 3
    10. 
  
  
  
  
  10.              
  11. Box 4
    12. 
  
  
  
  
  12.        
    13. 
  
  
  
  
  13.      
  •      
  •          
  •              
  •                  
  •                  主頁
  •              
  •              
  •                  
  •                  Box 2
  •              
  •              
  •                  
  •                  Box 3
  •              
  •              
  •                  
  •                  Box 4
  •              
  •          
  •      

    • 定義一個header的ID標(biāo)記，然后下面有個四個導(dǎo)航，用于切換的

    2 – 一些CSS代碼

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

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

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

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

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.

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

     
 
 
 
      
  
  
  
  
    1. $(document).ready(function() {   
      2. 
  
  
  
  
    2.         $('a.link').click(function () {   
      3. 
  
  
  
  
    3.             $('#wrapper').scrollTo($(this).attr('href'), 800); 
      4. 
  
  
  
  
    4.             return false;   
      5. 
  
  
  
  
    5.         });   
      6. 
  
  
  
  
    6.     });
      7.

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

    1，確保整個頁面加載之前運(yùn)行腳本。

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

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

    4取消點(diǎn)擊瀏覽器的默認(rèn)行為。

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

     
 
 
 
      
  
  
  
  
      2.

    • 增加CSS效果代碼

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

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

    第4步 - 完成所有的動作

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

     
 
 
 
      
  
  
  
  
    1. function setPosition(check, div, p1, p2, p3, p4) { 
      2. 
  
  
  
  
    2.      if(check==='#box1') 
      3. 
  
  
  
  
    3.          { 
      4. 
  
  
  
  
    4.              $(div).scrollTo(p1, 800); 
      5. 
  
  
  
  
    5.          } 
      6. 
  
  
  
  
    6.      else if(check==='#box2') 
      7. 
  
  
  
  
    7.          { 
      8. 
  
  
  
  
    8.              $(div).scrollTo(p2, 800); 
      9. 
  
  
  
  
    9.          } 
      10. 
  
  
  
  
    10.      else if(check==='#box3') 
      11. 
  
  
  
  
    11.          { 
      12. 
  
  
  
  
    12.              $(div).scrollTo(p3, 800); 
      13. 
  
  
  
  
    13.          } 
      14. 
  
  
  
  
    14.      else 
      15. 
  
  
  
  
    15.          { 
      16. 
  
  
  
  
    16.              $(div).scrollTo(p4, 800); 
      17. 
  
  
  
  
    17.          } 
      18. 
  
  
  
  
    18.  };
      19. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. $(document).ready(function() {   
      2. 
  
  
  
  
    2.      $('a.link').click(function () {   
      3. 
  
  
  
  
    3.          $('#wrapper').scrollTo($(this).attr('href'), 800); 
      4. 
  
  
  
  
    4.          //add this line 
      5. 
  
  
  
  
    5.          setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px') 
      6. 
  
  
  
  
    6.          //end add this 
      7. 
  
  
  
  
    7.          return false;   
      8. 
  
  
  
  
    8.      });   
      9. 
  
  
  
  
    9.  });
      10.

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

     
 
 
 
      
  
  
  
  
    1. $(document).ready(function() {   
      2. 
  
  
  
  
    2.         $('a.link').click(function () {   
      3. 
  
  
  
  
    3.         $('#wrapper').scrollTo($(this).attr('href'), 800); 
      4. 
  
  
  
  
    4.         setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px') 
      5. 
  
  
  
  
    5.         //add this line 
      6. 
  
  
  
  
    6.         setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px') 
      7. 
  
  
  
  
    7.         //end add this 
      8. 
  
  
  
  
    8.         return false;   
      9. 
  
  
  
  
    9.     });   
      10. 
  
  
  
  
    10. });
      11.

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

     
 
 
 
      
  
  
  
  
    1. $(document).ready(function() {    
      2. 
  
  
  
  
    2.     $('a.link').click(function () {    
      3. 
  
  
  
  
    3.         $('#wrapper').scrollTo($(this).attr('href'), 800);  
      4. 
  
  
  
  
    4.         setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')  
      5. 
  
  
  
  
    5.         setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')  
      6. 
  
  
  
  
    6.         //add this  
      7. 
  
  
  
  
    7.         $('a.link').removeClass('selected');    
      8. 
  
  
  
  
    8.         $(this).addClass('selected');  
      9. 
  
  
  
  
    9.         //end add this  
      10. 
  
  
  
  
    10.         return false;    
      11. 
  
  
  
  
    11.     });    
      12. 
  
  
  
  
    12. });
      13. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. #menu a.selected {  
      2. 
  
  
  
  
    2. background:#AAA;  
      3. 
  
  
  
  
    3. color:#FFF;  
      4. 
  
  
  
  
    4. border:#67b2ff 3px solid;  
      5. 
  
  
  
  
    5. text-decoration:none;  
      6. 
  
  
  
  
    6. padding:10px; 
      7. 
  
  
  
  
    7. margin-right:10px;  
      8. 
  
  
  
  
    8. border-radius:10px; 
      9. 
  
  
  
  
    9.  -moz-border-radius:10px;  
      10. 
  
  
  
  
    10. -webkit-border-radius:10px; 
      11. 
  
  
  
  
    11. }
      12.

    這個是css邊框圓角效果 ，下面是演示效果。 Demo


    分享文章：jQuery實(shí)現(xiàn)的視差滾動教程
    文章源于：    http://www.dlmjj.cn/article/djecphc.html

    其他資訊