成人自拍视频在线观看,玖草在线,久久久一

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

Demo ????

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

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

      <div id="header">
           <h1 id="logo">Clouds demo</h1>
        <ul id="menu">
            <li><a href="#box1" class="link">Home</a></li>
            <li><a href="#box2" class="link">Box 2</a></li>
            <li><a href="#box3" class="link">Box 3</a></li>
            <li><a href="#box4" class="link">Box 4</a></li>
      </ul>
    </div><!-- end header -->
    <div id="wrapper">
        <ul id="mask">
            <li id="box1" class="box">
                <a name="box1"></a>
                <div class="content"><div class="inner">主頁(yè)</div></div>
            </li><!-- end box1 -->
            <li id="box2" class="box">
                <a name="box2"></a>
                <div class="content"><div class="inner">Box 2</div></div>
            </li><!-- end box2 -->
            <li id="box3" class="box">
                <a name="box3"></a>
                <div class="content"><div class="inner">Box 3</div></div>
            </li><!-- end box3 -->
            <li id="box4" class="box">
                <a name="box4"></a>
                <div class="content"><div class="inner">Box 4</div></div>
            </li><!-- end box4 -->
        </ul><!-- end mask -->
    </div><!-- end wrapper -->

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

?

2 – 一些CSS代碼

創(chuàng)建一個(gè)新的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代碼相信你能看到吧，我簡(jiǎn)單解釋一下，我們把需要滾動(dòng)的區(qū)域放在id為wrapper的DIV內(nèi)，無(wú)論他在那個(gè)地方一定要保證他滾動(dòng)的固定性。id為mask的標(biāo)記做為具體的滑動(dòng)實(shí)現(xiàn)，他的寬度是100%，因?yàn)檫@里有4個(gè)區(qū)域需要全屏滾動(dòng)，所以他的寬度設(shè)置為400

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

?

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

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

      <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

然后打開這個(gè)文件看到最基本的jquery語(yǔ)法

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

就這么簡(jiǎn)單，看看這個(gè)代碼做個(gè)什么

1，確保整個(gè)頁(yè)面加載之前運(yùn)行腳本。
2? ，增加了點(diǎn)擊監(jiān)聽所有<a>標(biāo)簽。在這種情況下，這是我們的導(dǎo)航菜單中的所有鏈接，但我們可以添加“鏈接”類行為的任何頁(yè)面上的鏈接。然后，我們指定一個(gè)動(dòng)作，點(diǎn) 擊檢測(cè)功能。
3? 呼吁＃包裝的div的scrollTo插件，并傳遞給它的目的地，并以毫秒為單位的時(shí)間來(lái)完成動(dòng)畫。
4 取消點(diǎn)擊瀏覽器的默認(rèn)行為。

現(xiàn)在我們知道如何滾動(dòng)一個(gè)特定的div的內(nèi)容，讓我們?cè)陬^部背景增加自己的DIV內(nèi)容

      <div id="cloud1" class="clouds">
 <div id="clouds-small"></div>
</div><!-- end clouds -->
<div id="cloud2" class="clouds">
  <div id="clouds-big"></div>
</div><!-- end clouds -->

增加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，全屏寬度，以適應(yīng)滾動(dòng)和定位，效果如下圖

?

第4步 - 完成所有的動(dòng)作

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

      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;  
    });  
});

到這里每個(gè)云將移動(dòng)400個(gè)像素，看他們之間的差異像素大小

      $(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設(shè)置成800個(gè)像素了，這點(diǎn)需要大家注意

      $(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;
}

這個(gè)是css邊框圓角效果，下面是演示效果，源碼的話留下郵箱給你發(fā)郵箱里面去

Demo

來(lái)源： http://www.cnblogs.com/58top/archive/2012/08/09/effect_using_jquery.html

jquery實(shí)現(xiàn)的視差滾動(dòng)教程(視差大背景效果)

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義