基于JQuery實現(xiàn)仿網(wǎng)易郵箱全屏動感滾動插件fullPage

更新時間：2015年09月20日 13:46:01 投稿：mrr

網(wǎng)易郵箱專題頁的效果相信很多朋友都看過，也許有很多朋友想著把自己的網(wǎng)站做成那樣動感美妙的全屏滾動效果，但苦于技術(shù)有限，只能望而生嘆。此刻您有福了，這款基于jquery的fullpage就可以輕松的幫你實現(xiàn)動感美妙的全屏滾動效果，需要的可以參考下

先給大家展示效果圖如下所示：

使用方法：

首先在head區(qū)引入jquery.js，jquery-ui.js，fullPage.js以及樣式文件jquery.fullPage.css

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

接著構(gòu)建html代碼，這里的代碼較長，所以中間用…代替

<div class="section section1">
<div class="bg"><img src="images/section1.jpg" alt=""></div>
<div class="bg11"></div>
<div class="bg12"></div>
<div class="bg13"></div>
<div class="mail">
<a class="mail-163" >163郵箱</a>
<a class="mail-126" >126郵箱</a>
<a class="mail-yeah" >yeah郵箱</a>
</div>
<div class="hgroup">
<h1><a >網(wǎng)易郵箱6.0</a></h1>
<h2>改變，不止所見。</h2>
</div>
<p class="p11">網(wǎng)易郵箱6.0版&mdash;&mdash;2014年最具創(chuàng)意氣質(zhì)的重量級新郵箱，重生光華，為之矚目。唯美<br>的視覺設計和視覺化交互，無可替代的獨創(chuàng)動態(tài)情景皮膚，多項國內(nèi)創(chuàng)意產(chǎn)品專利技術(shù)，<br>成就無與倫比的出眾品味，無可比擬的美妙體驗。</p>
</div>
<div class="section section2">內(nèi)容</div>
<div class="section section3">內(nèi)容</div>
...
<div class="section section9">內(nèi)容</div>
<div class="section section10">
 <div class="bg"><img src="images/section10.jpg" alt=""></div>
 <div class="bg101"></div>
 <div class="bg102"></div>
 <div class="bg103"></div>
 <a class="go" >馬上體驗</a>
 <p class="copyright">
 <a href="javascript:">關于網(wǎng)易</a>
 <a href="javascript:">關于網(wǎng)易免費郵</a>
 <a href="javascript:">郵箱官方博客</a>
 <a href="javascript:">客戶服務</a>
 <a href="javascript:">隱私政策</a>
 <span>|</span>
 <span>網(wǎng)易公司版權(quán)所有 © 1997-2014 </span>
 </p>
</div>

為了兼容 IE 低版本，“大背景”使用的是 img 方式（section1.jpg），并在 CSS 中設置 img 寬度和高度 100%，以填滿整個屏幕。

JavaScript

$(function(){
 if($.browser.msie && $.browser.version < 10){
 $('body').addClass('ltie10');
 }
 $.fn.fullpage({
 verticalCentered: false,
 anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8', 'page9', 'page10'],
 navigation: true,
 navigationTooltips: ['首頁', '視覺', '交互', '皮膚', '功能', '待辦郵件', '聯(lián)系人郵件', '科技', '連接易信', '馬上體驗']
 });
});

為了在不支持 CSS3 動畫的低版本 IE 中有更好的體驗，我們對瀏覽器進行判斷，如果 IE 版本低于 10，就給 body 加上一個 ltie10 類。這個類的主要作用是解決低版本 IE 在滾動時，背景圖片立刻隱藏的問題。

您可能感興趣的文章: