基于JQuery实现模拟网易邮箱的全屏动态滚动插件fullPage

让我们向您展示如下效果图：

用法：

首先在头部区域引入jquery.js、jquery-ui.js、fullPage.js和样式文件jquery.fullPage.css

link rel='样式表' href=' CSS/jquery . full page . CSS ' script src=' http : js/jquery . min . js '/script script src=' http : js/jquery-ui . min . js '/script script src=' http : js/jquery . full page . min . js '/script然后构建html代码，这段代码很长，所以中间被…

Div class=' section 1 ' Div class=' BG ' img src=' http : images/section 1 . jpg ' alt=' '/Div Div class=' bg11 '/Div Div class=' bg12 '/Div Div class=' bg13 '/Div class=' mail ' a class=' mail-163 ' href=' http://www.jqcool.net/'163电子邮件/aa class=' mail-126 ' href=' http://www.jqcool.net/'126电子邮件/The aa class=' mail/h2/divp class='p11 '网易邮箱6.0版—— 2014年最具创意气质的重量级新邮箱重生，备受关注。美的br的视觉设计和视觉交互，不可替代的原创动态场景皮肤，以及众多国产创意产品的专利技术，让br实现了无与伦比的优越品味和无与伦比的精彩体验。/p/div class=' section section 2 '内容/div class=' section section 3 '内容/div.Div class=' section 9 ' content/Div Div class=' section 10 ' Div class=' BG ' img src=' http : images/section 10 . jpg ' alt=' '/Div Div class=' BG 101 '/Div Div class=' BG 102 '/Div class=' BG 103 '/Div A class=' go ' href=' http://www.jqcool.net/'experience now/A p class=' copyright ' A href=' JavaScript 3360 '关于网易/A href Span span网易公司版权1997-2014/span/p/div为了兼容IE的低版本，“大背景”采用img模式(section1.jpg)，在CSS中将img的宽度和高度设置为100%填充整个屏幕。

Java Script语言

$(function(){ if($ . browser . msie $ . browser . version 10){ $(' body ')。addCLaSS(' LTI E10 ')；} $ . fn . full page({ verticalcentered : false，anchors 3360[' page 1 '，' page2 '，' page3 '，' page4 '，' page5 '，' page6 '，' page7 '，' page8 '，' page9 '，' Page10']，navigation: true，navigation tooltip 3360['主页'，'视觉'，'交互'，'皮肤'，'功能'，'待办邮件'，'联系邮件'，'技术'，'连接容易信任'，'马上体验' })；});为了在不支持CSS3动画的低版本IE中有更好的体验，我们对浏览器进行了判断，如果IE版本低于10，则在正文中增加一个ltie10类。这个类的主要功能是解决低版本IE滚动时背景图片立即隐藏的问题。