以下是 jQuery实现网易邮箱页面js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery实现网易邮箱页面</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
* { margin: 0; padding: 0;}
body { font: 16px/1.8 "Microsoft Yahei",verdana;}
/* 右侧导航 */
#fullPage-nav { _display: none; font-size: 12px;}
#fullPage-nav li { width: 90px; height: 21px; margin: 10px 0 0; vertical-align: middle;}
#fullPage-nav li a { float: right; width: 21px; height: 21px; color: #8F9DA4; text-decoration: none; text-align: right; background: url(images/dot.png) 5px 5px no-repeat;}
#fullPage-nav li .active { background-position: 0 bottom;}
#fullPage-nav span { display: none;}
.fullPage-tooltip { float: left; top: 0; margin-right: 5px; font: 12px "Microsoft Yahei"; color: #8F9DA4; line-height: 21px;}
.section { position: relative; overflow: hidden;}
.section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.section .bg img { display: block; width: 100%; height: 100%;}
.bg11 { position: absolute; bottom: 0; width: 100%; height: 850px; background: url(images/bg11.png) 50% 0 no-repeat; transition: all 1s;}
.bg12 { position: absolute; bottom: -392px; width: 100%; height: 392px; background: url(images/bg12.png) 50% 0 no-repeat; opacity: 0; transition: all 1.7s; bottom: 90px\0;}
.bg13 { position: absolute; bottom: -377px; width: 100%; height: 377px; background: url(images/bg13.png) 50% 0 no-repeat; transition: all 1s;}
.hgroup { position: absolute; width: 554px; height: 176px; left: 50%; top: 25%; margin: 0 0 0 -277px; text-indent: -9999px; background-image: url(images/slogan.png); opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.p11 { position: absolute; left: 50%; top: 50%; width: 600px; margin: 0 0 0 -280px; font-size: 14px; color: #94a7c6; opacity: 0; transition: all 0.5s;}
.mail { position: absolute; left: 50%; top: -26px; width: 375px; height: 26px; margin-left: -187px; background-image: url(images/logo.png); transition: all 1s;}
.mail { float: left; height: 26px; text-indent: -9999px;}
.mail-163 { float: left; width: 107px;}
.mail-126 { float: left;width: 108px; margin-left: 23px;}
.mail-yeah { float: right; width: 115px;}
.bg21 { position: absolute; left: 50%; bottom: 15%; width: 819px; height: 250px; margin-left: -608px; margin-bottom: 40px; background: url(images/bg21.png) 0 0 no-repeat; transition: all 1s; opacity: 0; margin-left: -1108px;}
.bg22 { position: absolute; left: 50%; bottom: 15%; width: 819px; height: 299px; margin-left: -280px; margin-bottom: 70px; background: url(images/bg22.png) right 0 no-repeat; transition: all 1s; opacity: 0; margin-left: 320px;}
.bg23 { position: absolute; left: 50%; bottom: 15%; width: 819px; height: 325px; margin-left: -409px; background: url(images/bg23.png) 50% 0 no-repeat; transition: all 1s; bottom: -40%;}
.section strong { position: absolute; left: 50%; top: 15%; z-index: 10; width: 512px; height: 45px; margin-left: -256px; font-size: 24px; font-weight: 500; color: #748A9E; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.section h3 { position: absolute; left: 50%; top: 15%; z-index: 10; width: 512px; height: 45px; margin-left: -256px; margin-top: 60px; text-indent: -9999px; background-repeat: no-repeat; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.p1 { position: absolute; left: 50%; top: 15%; width: 510px; margin-left: -255px; margin-top: 130px; font-size: 16px; color: #727F8C; opacity: 0; transition: all 1s;}
.section2 h3 { background-image: url(images/t2.png);}
.section3 h3 { background-image: url(images/t3.png);}
.section4 h3 { background-image: url(images/t4.png);}
.section5 h3 { background-image: url(images/t5.png);}
.section6 strong { width: 561px; margin-left: -280px;}
.section6 h3 { width: 561px; margin-left: -280px; background-image: url(images/t6.png);}
.section7 strong { width: 561px; margin-left: -280px;}
.section7 h3 { width: 561px; margin-left: -280px; background-image: url(images/t7.png);}
.section8 strong { width: 561px; margin-left: -280px;}
.section8 h3 { width: 561px; margin-left: -280px; background-image: url(images/t8.png);}
.section9 strong { width: 609px; margin-left: -304px;}
.section9 h3 { width: 609px; margin-left: -304px; background-image: url(images/t9.png);}
.section9 h3 span { position: absolute; left: -100px; top: -48px; width: 89px; height: 90px; background-image: url(images/yixin.png);}
.bg31 { position: absolute; left: 50%; bottom: 0; width: 892px; height: 472px; margin-left: -396px; margin-bottom: 80px; background-image: url(images/bg31.png); opacity: 0; transition: all 1s;}
.bg32 { position: absolute; left: 50%; bottom: 0; width: 892px; height: 472px; margin-left: -396px; background: url(images/bg32.png) 470px bottom no-repeat; opacity: 0; transition: all 1s;}
.bg33 { position: absolute; left: 50%; bottom: 0; width: 441px; height: 380px; margin-left: 50%; background: url(images/bg33.png) 0 0 no-repeat; opacity: 0; transition: all 1s;}
.p3 { position: absolute; width: 430px; left: 50%; top: 15%; margin-top: 250px; margin-left: -100%; font-size: 16px; color: #FFFDE1; opacity: 0; transition: all 1s;}
.bg41 { position: absolute; bottom: -372px; width: 100%; height: 372px; background: url(images/bg41.png) 50% 0 no-repeat; transition: all 1s;}
.bg42 { position: absolute; bottom: -449px; width: 100%; height: 449px; background: url(images/bg42.png) 50% 0 no-repeat; transition: all 1s;}
.bg43 { position: absolute; bottom: -449px; width: 100%; height: 449px; margin-bottom: -130px; background: url(images/bg43.png) 50% 0 no-repeat; transition: all 1s;}
.bg51, .bg52, .bg53, .bg54 { position: absolute; z-index: 1; width: 208px; left: 50%; bottom: 20%; padding-top: 210px; color: #fff;}
.section5 h4 { margin-bottom: 12px; font-size: 23px; font-weight: 500;}
.section5 p { font-size: 14px;}
.bg51 { margin-left: -851px; background: url(images/bg51.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg52 { margin-left: -403px; background: url(images/bg52.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg53 { margin-left: 195px; background: url(images/bg53.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg54 { margin-left: 645px; background: url(images/bg54.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg61 { position: absolute; top: -454px; width: 100%; height: 545px; background: url(images/bg61.png) 50% 0 no-repeat; transition: all 1s;}
.bg62 { position: absolute; left: 10%; bottom: 20%; width: 597px; height: 284px; margin-left: -507px; background-image: url(images/bg62.png); transition: all 1s;}
.txt6 { position: absolute; left: 90%; bottom: 20%; width: 447px; margin-left: 90px; opacity: 0; transition: all 1s;}
.txt6 p { margin-bottom: 17px; color: #5C7970;}
.bg71 { position: absolute; left: 50%; bottom: -201px; width: 699px; height: 201px; margin-left: -630px; background: url(images/bg71.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg72 { position: absolute; left: 50%; bottom: -206px; width: 182px; height: 206px; margin-left: -170px; background: url(images/bg72.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg73 { position: absolute; left: 50%; bottom: 170px; width: 651px; height: 231px; margin-left: -530px; background: url(images/bg73.png) 50% 0 no-repeat;}
.bg74 { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;}
.bg74 img { position: absolute; left: 0; bottom: 0; width: 100%; height: 251px;}
.txt7 { position: absolute; left: 50%; bottom: -150px; width: 420px; margin-left: 100px; opacity: 0; transition: all 1s;}
.txt7 p { margin-bottom: 17px; color: #EAEFF2;}
.bg81 { position: absolute; width: 100%; bottom: 100px; height: 215px; background: url(images/bg81.png) 50% 0 no-repeat;}
.bg82 { position: absolute; left: 50%; bottom: 160px; width: 164px; height: 117px; margin-left: -180px; background-image: url(images/bg82.png); opacity: 0; transition: all 1s;}
.bg83 { position: absolute; left: 50%; bottom: 280px; width: 70px; height: 29px; margin-left: -330px; background-image: url(images/bg83.png); opacity: 0; transition: all 1s;}
.bg84 { position: absolute; left: 50%; bottom: 320px; width: 43px; height: 26px; margin-left: -410px; background-image: url(images/bg84.png); opacity: 0; transition: all 1s;}
.p8 { position: absolute; left: 50%; top: 15%; width: 565px; margin-left: -282px; margin-top: 130px; font-size: 16px; color: #727F8C; opacity: 0; transition: all 1s;}
.bg91, .bg92, .bg93 { padding-top: 350px; font-size: 16px; color: #fff;}
.bg91 { position: absolute; left: 50%; bottom: 15%; width: 340px; margin-left: -970px; background: url(images/bg91.png) 0 0 no-repeat; opacity: 0; transition: all 1s;}
.bg91 p { position: relative; left: 20px; margin-left: 40px; border-right: 1px solid #13AB86;}
.bg92 { position: absolute; left: 50%; bottom: 15%; width: 340px; margin-left: -180px; background: url(images/bg92.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg92 p { position: relative; left: 40px; margin-left: 30px;}
.bg93 { position: absolute; left: 50%; bottom: 15%; width: 340px; margin-left: 630px; background: url(images/bg93.png) 50% 0 no-repeat; opacity: 0; transition: all 1s;}
.bg93 p { position: relative; left: -20px; padding-left: 100px; border-left: 1px solid #13AB86;}
.bg101 { position: absolute; width: 100%; height: 100%; background: url(images/bg101.png) 50% 20% no-repeat;}
.bg102 { position: absolute; width: 100%; top: 25%; height: 79px; background: url(images/bg102.png) 50% 0 no-repeat; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.bg103 { position: absolute; width: 100%; top: 25%; height: 37px; margin-top: 110px; background: url(images/bg103.png) 50% 0 no-repeat; opacity: 0; -webkit-transform:scale(0.5, 0.5); transform:scale(0.5, 0.5); transition: all 1s;}
.go { position: absolute; left: 50%; top: 55%; width: 254px; height: 70px; margin-top: 220px; margin-left: -127px; text-indent: -9999px; background-image: url(images/btn.png); opacity: 0; transition: all 1s;}
.copyright { position: absolute; left: 0; bottom: 20px; width: 100%; text-align: center; font-size: 0;}
.copyright a, .copyright span { margin: 0 7px; font-size: 12px; color: #a0a0a0;}
/* CSS3过度及动画 */
.active strong, .active h3 { opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .p1 { opacity: 1; transition-delay: 1.7s;}
.active .bg12 { bottom: 90px; opacity: 1; transition-delay: 0.7s; }
.active .bg13 { bottom: 0; opacity: 1; transition-delay: 0.7s;}
.active .hgroup { opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .mail { top: 25px; transition-delay: 0.7s;}
.active .p11 { opacity: 1; transition-duration: 1s; transition-delay: 2s;}
.active .bg21 { opacity: 1; margin-left: -608px; transition-delay: 0.7s;}
.active .bg23 { bottom: 15%; transition-delay: 0.7s;}
.active .bg22 { margin-left: -280px; opacity: 1; transition-delay: 0.7s;}
.active .p3 { margin-left: -480px; opacity: 1; transition-delay: 0.7s;}
.active .bg31, .active .bg32 { opacity: 1; transition-delay: 1s;}
.active .bg33 { margin-left: -120px; opacity: 1; transition-delay: 0.7s;}
.active .bg41 { bottom: 15%; transition-delay: 0.7s;}
.active .bg42 { bottom: 15%; transition-delay: 1.1s;}
.active .bg43 { bottom: 15%; transition-delay: 0.9s;}
.active .bg51 { margin-left: -551px; opacity: 1; transition-delay: 0.7s;}
.active .bg52 { margin-left: -253px; opacity: 1; transition-delay: 0.7s;}
.active .bg53 { margin-left: 45px; opacity: 1; transition-delay: 0.7s;}
.active .bg54 { margin-left: 345px; opacity: 1; transition-delay: 0.7s;}
.active .bg61 { top: 0; transition-delay: 0.7s;}
.active .bg62 { left: 50%; opacity: 1; transition-delay: 0.7s;}
.active .txt6 { left: 50%; opacity: 1; transition-delay: 0.7s;}
.active .bg71 { bottom: 250px; opacity: 1; transition-delay: 0.7s;}
.active .bg72 { bottom: 350px; opacity: 1; transition-delay: 0.9s;}
.active .txt7 { bottom: 420px; opacity: 1; transition-delay: 1.1s;}
.active .bg82 { bottom: 260px; margin-left: -280px; opacity: 1; transition-delay: 0.7s;}
.active .bg83 { bottom: 380px; margin-left: -430px; opacity: 1; transition-delay: 1s;}
.active .bg84 { bottom: 420px; margin-left: -510px; opacity: 1; transition-delay: 1.2s;}
.active .p8 { opacity: 1; transition-delay: 1.7s;}
.active .bg91 { margin-left: -570px; opacity: 1; transition-delay: 0.7s;}
.active .bg92 { opacity: 1; transition-delay: 0.8s;}
.active .bg93 { margin-left: 230px; opacity: 1; transition-delay: 0.7s;}
.active .bg102, .active .bg103 { opacity: 1; -webkit-transform:scale(1, 1); transform:scale(1, 1); transition-delay: 0.7s;}
.active .go { top: 25%; opacity: 1; transition-delay: 1.2s;}
/* for lt ie 10 */
.ltie10 strong, .ltie10 h3 { opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .p1 { opacity: 1; transition-delay: 1.7s;}
.ltie10 .bg12 { bottom: 90px; opacity: 1; transition-delay: 0.7s; }
.ltie10 .bg13 { bottom: 0; opacity: 1; transition-delay: 0.7s;}
.ltie10 .hgroup { opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .mail { top: 25px; transition-delay: 0.7s;}
.ltie10 .p11 { opacity: 1; transition-duration: 1s; transition-delay: 2s;}
.ltie10 .bg21 { opacity: 1; margin-left: -608px; transition-delay: 0.7s;}
.ltie10 .bg23 { bottom: 15%; transition-delay: 0.7s;}
.ltie10 .bg22 { margin-left: -280px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .p3 { margin-left: -480px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg31, .ltie10 .bg32 { opacity: 1; transition-delay: 1s;}
.ltie10 .bg33 { margin-left: -120px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg41 { bottom: 15%; transition-delay: 0.7s;}
.ltie10 .bg42 { bottom: 15%; transition-delay: 1.1s;}
.ltie10 .bg43 { bottom: 15%; transition-delay: 0.9s;}
.ltie10 .bg51 { margin-left: -551px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg52 { margin-left: -253px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg53 { margin-left: 45px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg54 { margin-left: 345px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg61 { top: 0; transition-delay: 0.7s;}
.ltie10 .bg62 { left: 50%; opacity: 1; transition-delay: 0.7s;}
.ltie10 .txt6 { left: 50%; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg71 { bottom: 250px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg72 { bottom: 350px; opacity: 1; transition-delay: 0.9s;}
.ltie10 .txt7 { bottom: 420px; opacity: 1; transition-delay: 1.1s;}
.ltie10 .bg82 { bottom: 260px; margin-left: -280px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg83 { bottom: 380px; margin-left: -430px; opacity: 1; transition-delay: 1s;}
.ltie10 .bg84 { bottom: 420px; margin-left: -510px; opacity: 1; transition-delay: 1.2s;}
.ltie10 .p8 { opacity: 1; transition-delay: 1.7s;}
.ltie10 .bg91 { margin-left: -570px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg92 { opacity: 1; transition-delay: 0.8s;}
.ltie10 .bg93 { margin-left: 230px; opacity: 1; transition-delay: 0.7s;}
.ltie10 .bg102, .ltie10 .bg103 { opacity: 1; transform:scale(1, 1); transition-delay: 0.7s;}
.ltie10 .go { top: 25%; opacity: 1; transform:scale(1, 1); transition-delay: 1.2s;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(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: ['首页', '视觉', '交互', '皮肤', '功能', '待办邮件', '联系人邮件', '科技', '连接易信', '马上体验']
});
});
</script>
</head>
<body>
<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="#">163邮箱</a>
<a class="mail-126" href="#">126邮箱</a>
<a class="mail-yeah" href="#">yeah邮箱</a>
</div>
<div class="hgroup">
<h1><a href="#">网易邮箱6.0</a></h1>
<h2>改变，不止所见。</h2>
</div>
<p class="p11">网易邮箱6.0版——2014年最具创意气质的重量级新邮箱，重生光华，为之瞩目。唯美<br>的视觉设计和视觉化交互，无可替代的独创动态情景皮肤，多项国内创意产品专利技术，<br>成就无与伦比的出众品味，无可比拟的美妙体验。</p>
</div>
<div class="section section2">
<div class="bg"><img src="images/section2.jpg" alt=""></div>
<div class="bg21"></div>
<div class="bg22"></div>
<div class="bg23"></div>
<strong>[ 视觉·简 ]</strong>
<h3>华丽蜕变，尽享愉悦之美</h3>
<p class="p1">秉承网易邮箱经典的清新简洁的设计风格，邮箱 6.0 版带来全新一代的设计理念，更追求极致唯美的视觉设计、传承更多人文和艺术底蕴，华丽蜕变，带来更舒服更爽心悦目的视觉享受。</p>
</div>
<div class="section section3">
<div class="bg"><img src="images/section3.jpg" alt=""></div>
<div class="bg31"></div>
<div class="bg32"></div>
<div class="bg33"></div>
<strong>[ 视觉化交互设计 ]</strong>
<h3>心随眼动，感官直接体验</h3>
<p class="p3">邮箱 6.0 版采用了全新的视觉化交互设计，通过对界面的整体风格设计、重要信息的视觉化处理以及元素本身的视觉传达优化，来实现产品流程设计和交互行为塑造。从视觉的角度出发，让用户无需多想，直接通过感官与产品进行交互。</p>
</div>
<div class="section section4">
<div class="bg"><img src="images/section4.jpg" alt=""></div>
<div class="bg41"></div>
<div class="bg42"></div>
<div class="bg43"></div>
<strong>[ 动态情景皮肤 ]</strong>
<h3>美轮美奂，百变尽随你心</h3>
<p class="p1">国内首创动态情景皮肤，可以随着早晚时光，季节主题的变幻而自动切换，实现了在邮箱里也能感受天气和心情的变化，带来完全不同的页面体验并且呈现最佳视觉感受，还特别针对原有邮箱皮肤的对比度和色彩进行了微调，减少视觉疲劳感。</p>
</div>
<div class="section section5">
<div class="bg"><img src="images/section5.jpg" alt=""></div>
<strong>[ 功能·创 ]</strong>
<h3>灵活机变，全面为你而生</h3>
<div class="bg51">
<h4>新语音视频邮件</h4>
<p>写信不再枯燥！在线录制和播放声音和视频邮件，比单纯的文字邮件更感性、更方便，更好玩。</p>
</div>
<div class="bg52">
<h4>虚拟场景写信模式</h4>
<p>写信可以选择自己喜欢的场景，配合美妙的背景音乐，让写信<br>变得更为有趣和生动。</p>
</div>
<div class="bg53">
<h4>独创智能体检</h4>
<p>网易邮箱6.0版帮你关注邮箱安全，提醒你及时清理邮件，打<br>造轻量级邮箱。</p>
</div>
<div class="bg54">
<h4>全新多帐号关联</h4>
<p>一键关联和切换多个网易邮箱，同时对于重要的邮箱帐号进行<br>密码验证保护。</p>
</div>
</div>
<div class="section section6">
<div class="bg"><img src="images/section6.jpg" alt=""></div>
<div class="bg61"></div>
<div class="bg62"></div>
<strong>[ 待办邮件 ]</strong>
<h3>办公利器，工作更高效顺手</h3>
<div class="txt6">
<p>独家首创邮件管理方式：待办邮件<br>采用日程的方式第一时间分配和提醒邮件！</p>
<p>对于需要后续处理的重要邮件，如果正忙来不及处理和回复，只需设置为待办邮件，在待办时间到期时，邮件会在文件夹置顶提示或采用短信方式提醒。</p>
<p>如此高效迅速处理邮件，让邮件处理过程变成更轻松和快捷。</p>
</div>
</div>
<div class="section section7">
<div class="bg"><img src="images/section7.jpg" alt=""></div>
<div class="bg71"></div>
<div class="bg72"></div>
<div class="bg73"></div>
<strong>[ 联系人邮件 ]</strong>
<h3>一目了然，来往邮件更清晰</h3>
<div class="txt7">
<p>邮箱6.0版带来一种极其简便的方式，管理你和联系人的<br>邮件往来，帮助你精准定位到以联系人为维度的邮件列表。</p>
<p>同时支持以联系组方式来管理邮件，方便以群或相同关系<br>的群体间的邮件管理，比如：同学组，客户组，公司组等。</p>
</div>
<div class="bg74"><img src="images/bg74.png" alt=""></div>
</div>
<div class="section section8">
<div class="bg"><img src="images/section8.jpg" alt=""></div>
<div class="bg81"></div>
<div class="bg82"></div>
<div class="bg83"></div>
<div class="bg84"></div>
<strong>[ 科技.聚 ]</strong>
<h3>厚积薄发，大幅度提速创新标</h3>
<p class="p8">邮箱6.0版带来“飞”一般的访问体验，速度提升达30%。采用全新base基础库bjs，更加轻量级，性能更加优化，完全兼容国内用户使用的所有浏览器，以及基于"多核"多线程的核心js引擎，性能和访问速度大幅提升。</p>
</div>
<div class="section section9">
<div class="bg"><img src="images/section9.jpg" alt=""></div>
<strong>[ 让沟通更有趣 ]</strong>
<h3><span></span>沟通无界，连接易信无缝整合</h3>
<div class="bg91">
<p>易信扫描二维码即可登录网易<br>邮箱6.0版，“扫一扫”让邮<br>箱登录更方便。</p>
</div>
<div class="bg92">
<p>登录邮箱后，可直接使用Web<br>易信和好友聊天，还可以发图<br>片，让聊天更有趣。</p>
</div>
<div class="bg93">
<p>易信和邮箱新邮件同步提醒，<br>在易信可以直接查看和回复<br>邮件，手机收发邮件更快捷。</p>
</div>
</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="#">马上体验</a>
</div>
</body>
</html>JS代码(jquery.fullPage.min.js):
/** * fullPage 1.5.3 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo */
(function(b){
b.fn.fullpage=function(c){
function m(a){
if(c.autoScrolling){
a=window.event||a;
a=Math.max(-1,Math.min(1,a.wheelDelta||-a.detail));
var e;
e=b(".section.active");
if(!k)if(e=e.find(".slides").length?e.find(".slide.active").find(".scrollable"):e.find(".scrollable"),0>a)if(0<e.length)if(v("bottom",e))b.fn.fullpage.moveSectionDown();
else return!0;
else b.fn.fullpage.moveSectionDown();
else if(0<e.length)if(v("top",e))b.fn.fullpage.moveSectionUp();
else return!0;
else b.fn.fullpage.moveSectionUp();
return!1}
}
function F(){
document.addEventListener?(document.addEventListener("mousewheel",m,!1),document.addEventListener("DOMMouseScroll",m,!1)):document.attachEvent("onmousewheel",m)}
function n(a,e){
var d={
}
,f,h=a.position(),h=null!==h?h.top:null,H=G(a),l=a.data("anchor"),g=a.index(".section"),p=a.find(".slide.active");
if(p.length){
f=p.data("anchor");
var q=p.index()}
p=b(".section.active").index(".section")+1;
a.addClass("active").siblings().removeClass("active");
k=!0;
"undefined"!==typeof l?I(q,f,l):location.hash="";
c.autoScrolling?(d.top=-h,f="#superContainer"):(d.scrollTop=h,f="html,body");
c.css3&&c.autoScrolling?(b.isFunction(c.onLeave)&&c.onLeave.call(this,p,H),z("translate3d(0px,-"+h+"px,0px)",!0),setTimeout(function(){
b.isFunction(c.afterLoad)&&c.afterLoad.call(this,l,g+1);
setTimeout(function(){
k=!1;
b.isFunction(e)&&e.call(this)}
,J)}
,c.scrollingSpeed)):(b.isFunction(c.onLeave)&&c.onLeave.call(this,p,H),b(f).animate(d,c.scrollingSpeed,c.easing,function(){
b.isFunction(c.afterLoad)&&c.afterLoad.call(this,l,g+1);
setTimeout(function(){
k=!1;
b.isFunction(e)&&e.call(this)}
,J)}
));
r=l;
c.autoScrolling&&(K(l),L(l,g))}
function u(a,e){
var d=e.position(),f=a.find(".slidesContainer").parent(),h=e.index(),g=a.closest(".section"),l=g.index(".section"),k=g.data("anchor"),p=g.find(".fullPage-slidesNav"),q=e.data("anchor");
if(c.onSlideLeave){
var m=g.find(".slide.active").index(),n;
n=m>h?"left":"right";
b.isFunction(c.onSlideLeave)&&c.onSlideLeave.call(this,k,l+1,m,n)}
e.addClass("active").siblings().removeClass("active");
"undefined"===typeof q&&(q=h);
g.hasClass("active")&&(c.loopHorizontal||(g.find(".controlArrow.prev").toggle(0!=h),g.find(".controlArrow.next").toggle(!e.is(":last-child"))),I(h,q,k));
c.css3?(d="translate3d(-"+d.left+"px,0px,0px)",a.find(".slidesContainer").addClass("easing").css({
"-webkit-transform":d,"-moz-transform":d,"-ms-transform":d,transform:d}
),setTimeout(function(){
b.isFunction(c.afterSlideLoad)&&c.afterSlideLoad.call(this,k,l+1,q,h);
s=!1}
,c.scrollingSpeed)):f.animate({
scrollLeft:d.left}
,c.scrollingSpeed,function(){
b.isFunction(c.afterSlideLoad)&&c.afterSlideLoad.call(this,k,l+1,q,h);
s=!1}
);
p.find(".active").removeClass("active");
p.find("li").eq(h).find("a").addClass("active")}
function M(){
var a=b(window).width();
g=b(window).height();
c.resize&&S(g,a);
b(".section").each(function(){
parseInt(b(this).css("padding-bottom"));
parseInt(b(this).css("padding-top"));
if(c.scrollOverflow){
var a=b(this).find(".slide");
a.length?a.each(function(){
w(b(this))}
):w(b(this))}
c.verticalCentered&&b(this).find(".tableCell").css("height",g+"px");
b(this).css("height",g+"px");
a=b(this).find(".slides");
a.length&&u(a,a.find(".slide.active"))}
);
b(".section.active").position();
a=b(".section.active");
a.index(".section")&&n(a)}
function S(a,e){
var c=825,f=a;
825>a||900>e?(900>e&&(f=e,c=900),c=(100*f/c).toFixed(2),b("body").css("font-size",c+"%")):b("body").css("font-size","100%")}
function L(a,e){
c.navigation&&(b("#fullPage-nav").find(".active").removeClass("active"),a?b("#fullPage-nav").find('a[href="#'+a+'"]').addClass("active"):b("#fullPage-nav").find("li").eq(e).find("a").addClass("active"))}
function K(a){
c.menu&&(b(c.menu).find(".active").removeClass("active"),b(c.menu).find('[data-menuanchor="'+a+'"]').addClass("active"))}
function v(a,b){
if("top"===a)return!b.scrollTop();
if("bottom"===a)return b.scrollTop()+b.innerHeight()>=b[0].scrollHeight}
function G(a){
var c=b(".section.active").index(".section");
a=a.index(".section");
return c>a?"up":"down"}
function w(a){
a.css("overflow","hidden");
var b=a.closest(".section"),d=a.find(".scrollable");
(d.length?a.find(".scrollable").get(0).scrollHeight-parseInt(b.css("padding-bottom"))-parseInt(b.css("padding-top")):a.get(0).scrollHeight-parseInt(b.css("padding-bottom"))-parseInt(b.css("padding-top")))>g?(b=g-parseInt(b.css("padding-bottom"))-parseInt(b.css("padding-top")),d.length?d.css("height",b+"px").parent().css("height",b+"px"):(c.verticalCentered?a.find(".tableCell").wrapInner('<div class="scrollable" />'):a.wrapInner('<div class="scrollable" />'),a.find(".scrollable").slimScroll({
height:b+"px",size:"10px",alwaysVisible:!0}
))):(a.find(".scrollable").children().first().unwrap().unwrap(),a.find(".slimScrollBar").remove(),a.find(".slimScrollRail").remove());
a.css("overflow","")}
function N(a){
a.addClass("table").wrapInner('<div class="tableCell" style="height:'+g+'px;
" />')}
function z(a,c){
b("#superContainer").toggleClass("easing",c);
b("#superContainer").css({
"-webkit-transform":a,"-moz-transform":a,"-ms-transform":a,transform:a}
)}
function A(a,c){
var d=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".section").eq(a-1);
a===r||d.hasClass("active")?O(d,c):n(d,function(){
O(d,c)}
)}
function O(a,b){
if("undefined"!=typeof b){
var c=a.find(".slides"),f=c.find('[data-anchor="'+b+'"]');
f.length||(f=c.find(".slide").eq(b));
f.length&&u(c,f)}
}
function T(a,b){
a.append('<div class="fullPage-slidesNav"><ul></ul></div>');
var d=a.find(".fullPage-slidesNav");
d.addClass(c.slidesNavPosition);
for(var f=0;
f<b;
f++)d.find("ul").append('<li><a href="#"><span></span></a></li>');
d.css("margin-left","-"+d.width()/2+"px");
d.find("li").first().find("a").addClass("active")}
function I(a,b,c){
var f="";
a?("undefined"!==typeof c&&(f=c),"undefined"===typeof b&&(b=a),P=b,location.hash=f+"/"+b):location.hash=c}
function U(){
var a=document.createElement("p"),b,c={
webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"}
;
document.body.insertBefore(a,null);
for(var f in c)void 0!==a.style[f]&&(a.style[f]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[f]));
document.body.removeChild(a);
return void 0!==b&&0<b.length&&"none"!==b}
c=b.extend({
verticalCentered:!0,resize:!0,slidesColor:[],anchors:[],scrollingSpeed:700,easing:"easeInQuart",menu:!1,navigation:!1,navigationPosition:"right",navigationColor:"#000",navigationTooltips:[],slidesNavigation:!1,slidesNavPosition:"bottom",controlArrowColor:"#fff",loopBottom:!1,loopTop:!1,loopHorizontal:!0,autoScrolling:!0,scrollOverflow:!1,css3:!1,paddingTop:0,paddingBottom:0,fixedElements:null,normalScrollElements:null,afterLoad:null,onLeave:null,afterRender:null,afterSlideLoad:null,onSlideLeave:null}
,c);
var J=700;
b.fn.fullpage.setAutoScrolling=function(a){
c.autoScrolling=a;
a=b(".section.active");
c.autoScrolling?(b("html,body").css({
overflow:"hidden",height:"100%"}
),a.length&&(c.css3?(a="translate3d(0px,-"+a.position().top+"px,0px)",z(a,!1)):b("#superContainer").css("top","-"+a.position().top+"px"))):(b("html,body").css({
overflow:"auto",height:"auto"}
),c.css3?z("translate3d(0px,0px,0px)",!1):b("#superContainer").css("top","0px"),b("html,body").scrollTop(a.position().top))}
;
var s=!1,B=navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|Windows Phone)/),g=b(window).height(),k=!1,r,P;
F();
c.css3&&(c.css3=U());
b("body").wrapInner('<div id="superContainer" />');
if(c.navigation){
b("body").append('<div id="fullPage-nav"><ul></ul></div>');
var t=b("#fullPage-nav");
t.css("color",c.navigationColor);
t.addClass(c.navigationPosition)}
b(".section").each(function(a){
var e=b(this).find(".slide"),d=e.length;
a||b(this).addClass("active");
b(this).css("height",g+"px");
(c.paddingTop||c.paddingBottom)&&b(this).css("padding",c.paddingTop+" 0 "+c.paddingBottom+" 0");
"undefined"!==typeof c.slidesColor[a]&&b(this).css("background-color",c.slidesColor[a]);
"undefined"!==typeof c.anchors[a]&&b(this).attr("data-anchor",c.anchors[a]);
if(c.navigation){
var f="";
c.anchors.length&&(f=c.anchors[a]);
a=c.navigationTooltips[a];
"undefined"===typeof a&&(a="");
t.find("ul").append('<li data-tooltip="'+a+'"><a href="#'+f+'"><span></span></a></li>')}
if(0<d){
var f=100*d,h=100/d;
e.wrapAll('<div class="slidesContainer" />');
e.parent().wrap('<div class="slides" />');
b(this).find(".slidesContainer").css("width",f+"%");
b(this).find(".slides").after('<div class="controlArrow prev"></div><div class="controlArrow next"></div>');
b(this).find(".controlArrow.next").css("border-color","transparent transparent transparent "+c.controlArrowColor);
b(this).find(".controlArrow.prev").css("border-color","transparent "+c.controlArrowColor+" transparent transparent");
c.loopHorizontal||b(this).find(".controlArrow.prev").hide();
c.slidesNavigation&&T(b(this),d);
e.each(function(a){
a||b(this).addClass("active");
b(this).css("width",h+"%");
c.verticalCentered&&N(b(this))}
)}
else c.verticalCentered&&N(b(this))}
).promise().done(function(){
b.fn.fullpage.setAutoScrolling(c.autoScrolling);
b.isFunction(c.afterRender)&&c.afterRender.call(this);
c.fixedElements&&c.css3&&b(c.fixedElements).appendTo("body");
c.navigation&&(t.css("margin-top","-"+t.height()/2+"px"),t.find("li").first().find("a").addClass("active"));
c.menu&&c.css3&&b(c.menu).appendTo("body");
if(c.scrollOverflow)b(window).on("load",function(){
b(".section").each(function(){
var a=b(this).find(".slide");
a.length?a.each(function(){
w(b(this))}
):w(b(this))}
)}
);
b(window).on("load",function(){
var a=window.location.hash.replace("#","").split("/"),b=a[0],a=a[1];
b&&A(b,a)}
)}
);
var Q,C=!1;
b(window).scroll(function(a){
if(!c.autoScrolling){
var e=b(window).scrollTop();
a=b(".section").map(function(){
if(b(this).offset().top<e+100)return b(this)}
);
a=a[a.length-1];
if(!a.hasClass("active")){
C=!0;
var d=G(a);
b(".section.active").removeClass("active");
a.addClass("active");
var f=a.data("anchor");
b.isFunction(c.onLeave)&&c.onLeave.call(this,a.index(".section"),d);
b.isFunction(c.afterLoad)&&c.afterLoad.call(this,f,a.index(".section")+1);
K(f);
L(f,0);
c.anchors.length&&!k&&(r=f,location.hash=f);
clearTimeout(Q);
Q=setTimeout(function(){
C=!1}
,100)}
}
}
);
var D=0,x=0,E=0,y=0;
b(document).on("touchmove",function(a){
if(c.autoScrolling&&B){
a.preventDefault();
a=a.originalEvent;
var e=b(".section.active");
if(!k&&!s)if(E=a.touches[0].pageY,y=a.touches[0].pageX,e.find(".slides").length&&Math.abs(x-y)>Math.abs(D-E))x>y?e.find(".controlArrow.next").trigger("click"):x<y&&e.find(".controlArrow.prev").trigger("click");
else if(a=e.find(".slides").length?e.find(".slide.active").find(".scrollable"):e.find(".scrollable"),D>E)if(0<a.length)if(v("bottom",a))b.fn.fullpage.moveSectionDown();
else return!0;
else b.fn.fullpage.moveSectionDown();
else if(0<a.length)if(v("top",a))b.fn.fullpage.moveSectionUp();
else return!0;
else b.fn.fullpage.moveSectionUp()}
}
);
b(document).on("touchstart",function(a){
c.autoScrolling&&B&&(a=a.originalEvent,D=a.touches[0].pageY,x=a.touches[0].pageX)}
);
b.fn.fullpage.moveSectionUp=function(){
var a=b(".section.active").prev(".section");
c.loopTop&&!a.length&&(a=b(".section").last());
(0<a.length||!a.length&&c.loopTop)&&n(a)}
;
b.fn.fullpage.moveSectionDown=function(){
var a=b(".section.active").next(".section");
c.loopBottom&&!a.length&&(a=b(".section").first());
(0<a.length||!a.length&&c.loopBottom)&&n(a)}
;
b.fn.fullpage.moveTo=function(a,c){
var d="",d=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".section").eq(a-1);
"undefined"!==c?A(a,c):0<d.length&&n(d)}
;
b(window).on("hashchange",function(){
if(!C){
var a=window.location.hash.replace("#","").split("/"),b=a[0],a=a[1],c="undefined"===typeof r,f="undefined"===typeof r&&"undefined"===typeof a;
(b&&b!==r&&!c||f||"undefined"!==typeof a&&!s&&P!=a)&&A(b,a)}
}
);
b(document).keydown(function(a){
if(!k)switch(a.which){
case 38:case 33:b.fn.fullpage.moveSectionUp();
break;
case 40:case 34:b.fn.fullpage.moveSectionDown();
break;
case 37:b(".section.active").find(".controlArrow.prev").trigger("click");
break;
case 39:b(".section.active").find(".controlArrow.next").trigger("click")}
}
);
b(document).on("click","#fullPage-nav a",function(a){
a.preventDefault();
a=b(this).parent().index();
n(b(".section").eq(a))}
);
b(document).on({
mouseenter:function(){
var a=b(this).data("tooltip");
b('<div class="fullPage-tooltip '+c.navigationPosition+'">'+a+"</div>").hide().appendTo(b(this)).fadeIn(200)}
,mouseleave:function(){
b(this).find(".fullPage-tooltip").fadeOut().remove()}
}
,"#fullPage-nav li");
c.normalScrollElements&&(b(document).on("mouseover",c.normalScrollElements,function(){
document.addEventListener?(document.removeEventListener("mousewheel",m,!1),document.removeEventListener("DOMMouseScroll",m,!1)):document.detachEvent("onmousewheel",m)}
),b(document).on("mouseout",c.normalScrollElements,function(){
F()}
));
b(".section").on("click",".controlArrow",function(){
if(!s){
s=!0;
var a=b(this).closest(".section").find(".slides"),c=a.find(".slide.active"),d=null,d=b(this).hasClass("prev")?c.prev(".slide"):c.next(".slide");
d.length||(d=b(this).hasClass("prev")?c.siblings(":last"):c.siblings(":first"));
u(a,d)}
}
);
b(".section").on("click",".toSlide",function(a){
a.preventDefault();
a=b(this).closest(".section").find(".slides");
a.find(".slide.active");
var c=null,c=a.find(".slide").eq(b(this).data("index")-1);
0<c.length&&u(a,c)}
);
if(!B){
var R;
b(window).resize(function(){
clearTimeout(R);
R=setTimeout(M,500)}
)}
b(window).bind("orientationchange",function(){
M()}
);
b(document).on("click",".fullPage-slidesNav a",function(a){
a.preventDefault();
a=b(this).closest(".section").find(".slides");
var c=a.find(".slide").eq(b(this).closest("li").index());
u(a,c)}
)}
}
)(jQuery);
CSS代码(jquery.fullPage.css):
/** * fullPage 1.4.5 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo */
html,body{margin:0;padding:0;}
#superContainer{height:100%;position:relative;}
.section{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.slide{float:left;}
.slide,.slidesContainer{height:100%;display:block;}
.slides{height:100%;overflow:hidden;position:relative;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
.section.table,.slide.table{display:table;width:100%;}
.tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%;}
.slidesContainer{float:left;position:relative;}
.controlArrow{position:absolute;top:50%;cursor:pointer;width:0;height:0;border-style:solid;margin-top:-38px;}
.controlArrow.prev{left:15px;width:0;border-width:38.5px 34px 38.5px 0;border-color:transparent #fff transparent transparent;}
.controlArrow.next{right:15px;border-width:38.5px 0 38.5px 34px;border-color:transparent transparent transparent #fff;}
.scrollable{overflow:scroll;}
.easing{-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;transition:all 0.7s ease-out;}
#fullPage-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1;}
#fullPage-nav.right{right:17px;}
#fullPage-nav.left{left:17px;}
.fullPage-slidesNav{position:absolute;z-index:4;left:50%;opacity:1;}
.fullPage-slidesNav.bottom{bottom:17px;}
.fullPage-slidesNav.top{top:17px;}
#fullPage-nav ul,.fullPage-slidesNav ul{margin:0;padding:0;}
#fullPage-nav li,.fullPage-slidesNav li{display:block;width:14px;height:13px;margin:7px;position:relative;}
.fullPage-slidesNav li{display:inline-block;}
#fullPage-nav li a,.fullPage-slidesNav li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none;}
#fullPage-nav li .active span,.fullPage-slidesNav .active span{background:#333;}
#fullPage-nav span,.fullPage-slidesNav span{top:2px;left:2px;width:8px;height:8px;border:1px solid #000;background:rgba(0,0,0,0);-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;position:absolute;z-index:1;}
.fullPage-tooltip{position:absolute;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;top:-2px;}
.fullPage-tooltip.right{right:20px;}
.fullPage-tooltip.left{left:20px;}
分享到QQ
分享到微博
微信扫一扫
