Implementing full-screen dynamic scrolling plug-in fullPage_jquery imitating NetEase mailbox based on JQuery

I will first show you the renderings as follows:

How to use:

First introduce jquery.js, jquery-ui.js, fullPage.js and style file jquery.fullPage.css

in the head area

<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>

Then build the html code. The code here is longer, so use... in the middle instead of

<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" href="http://www.jqcool.net/">163邮箱</a>
<a class="mail-126" href="http://www.jqcool.net/">126邮箱</a>
<a class="mail-yeah" href="http://www.jqcool.net/">yeah邮箱</a>
</div>
<div class="hgroup">
<h1><a href="http://www.jq22.com/">网易邮箱6.0</a></h1>
<h2>改变，不止所见。</h2>
</div>
<p class="p11">网易邮箱6.0版&mdash;&mdash;2014年最具创意气质的重量级新邮箱，重生光华，为之瞩目。唯美<br>的视觉设计和视觉化交互，无可替代的独创动态情景皮肤，多项国内创意产品专利技术，<br>成就无与伦比的出众品味，无可比拟的美妙体验。</p>
</div>
<div class="section section2">内容</div>
<div class="section section3">内容</div>
...
<div class="section section9">内容</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" href="http://www.jqcool.net/">马上体验</a>
 <p class="copyright">
 <a href="javascript:">关于网易</a>
 <a href="javascript:">关于网易免费邮</a>
 <a href="javascript:">邮箱官方博客</a>
 <a href="javascript:">客户服务</a>
 <a href="javascript:">隐私政策</a>
 <span>|</span>
 <span>网易公司版权所有 &copy; 1997-2014 </span>
 </p>
</div>

In order to be compatible with lower versions of IE, the "big background" uses the img method (section1.jpg), and sets the img width and height to 100% in CSS to fill the entire screen.

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: ['首页', '视觉', '交互', '皮肤', '功能', '待办邮件', '联系人邮件', '科技', '连接易信', '马上体验']
 });
});

In order to have a better experience in lower versions of IE that do not support CSS3 animation, we judge the browser and add an ltie10 class to the body if the IE version is lower than 10. The main function of this class is to solve the problem that the background image is immediately hidden when scrolling in lower versions of IE.