Implémentation d'un plug-in de défilement dynamique plein écran fullPage_jquery imitant la boîte aux lettres NetEase basée sur JQuery

Je vais d'abord vous montrer les rendus comme suit :

Comment utiliser :

Introduisez d'abord jquery.js, jquery-ui.js, fullPage.js et le fichier de style jquery.fullPage.css

dans la zone d'en-tête

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

Ensuite, construisez le code html. Le code ici est plus long, alors utilisez... au milieu au lieu de

.

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

Afin d'être compatible avec les versions inférieures d'IE, le "grand arrière-plan" utilise la méthode img (section1.jpg) et définit la largeur et la hauteur de l'image à 100 % en CSS pour remplir tout l'écran.

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

Afin d'avoir une meilleure expérience dans les versions inférieures d'IE qui ne supportent pas l'animation CSS3, nous jugeons le navigateur et ajoutons une classe ltie10 au corps si la version d'IE est inférieure à 10. La fonction principale de cette classe est de résoudre le problème selon lequel l'image d'arrière-plan est immédiatement masquée lors du défilement dans les versions inférieures d'IE.