基于jquery实现全屏滚动效果

那么今天就来介绍这款整页，与fullPage.js是不同的，整页兼容性更佳，能向下兼容到IE6，不依赖任何射流研究…库，可独立使用。功能上虽然不如fullPage.js强大，但一般使用已经足够了，尤其是它的动画效果，你可以自由设定缩放、旋转以产生各种各样的动画效果。同时它还支持fullPage.js所没有的水平滚动。

兼容桌面端(ie5.5)和手机端你可以用它来构建你的个人主页或者网页应用这是一个不使用jQuery小巧的框架不到9KB再介绍之前先看一看运行效果图：

引入核心库，整页的依赖任何射流研究…库，所以只需引入它本身就可以了

脚本src=' http : js/整页。量滴js /脚本写入超文本标记语言

//请在头区加入以下代码，移动端使用元名称=“视口”内容=“宽度=设备宽度，初始比例=1,最大比例=1 '!-[如果lte IE 7]正文滚动='否！-!- [if gt IE 7]！身体！- ![endif]-div id=' page contain ' div class=' page 1 current ' div class=' contain '/div/div class=' page page 2 ' div class=' contain '/div/div class=' page page page 3 '数据-step=' 4 ' div class=' contain ' p class=' demo-data-step '数据-台阶可以让你在不切屏的情况下更换动画/p/div/div class=' page page page 4 ' div class=' contain '/div/div class=' page page page 5 ' div class=' contain '/div/div class='第6页' div class=' contain '/div/div/div ul id=' nav bar ' li0/李丽丽1/李丽丽2/李丽丽4/李丽丽5/ul/body写入CSS，不熟悉CSS3的朋友请回去补下，这里不做解析了，CSS可以根据项目的需求自由的定义。

html {-ms-touch-action : none；/* 阻止窗子手机的默认触摸事件*/} body，div，p { margin : 0；padd : 0；} ul { list-style :无；}车身{宽度： 100%;*光标：默认；飞越：隐藏；font: 16px/1.5 '微软雅黑Helvetica，西藏，西藏，微软JhengHei，Arial } # page contain { overflow :隐藏；} .第{显示：页无；宽度： 100%;高度： 100%;飞越：隐藏；绝对位置：top : 0；左： 0；} .包含{宽度： 100%；高度： 100%;显示器：无；相对位置：z-index : 0；} .当前。包含，滑动。包含{显示：块；} .当前{显示：块；z-index : 1；} .幻灯片{显示：块；z-index : 2；} .滑动{显示：块；z-index : 3；过渡-持续时间：毫秒！重要；-网络套件-过渡-持续时间：毫秒！重要；} .第1页{背景： # 37 C1E3；} .第2页{背景： # 009922；} .第3页{背景： # 992211；} .第4页{背景： # ff 00 ff} .第5页{背景： # 00ff 00} .第6页{背景： # 22 ffff} # NavBar { z-index : 3；绝对位置：前：名10%；右： 3%;} #navBar .活动{ background : # CCC } # NavBar Li { cursor :指针；边距-底部： 10px过渡：所有。七的轻松；边界半径： 50%;线高： 40px文本对齐：中心；宽度： 40px高度： 40px} p { width: 200px高度： 100像素；color: # fff文本对齐：中心；绝对位置：左侧： 50%;前：名50%；左边距：-100px；边距-top :-50px；opa城市3360 1；转都. 8转轻松转换-原始： 50% 50%;} .步骤1 p { transform : translate(0，-50px)；-web kit-transform : translate(0，-50px)；} .第2步p { opa city 3360 0；变压器：标尺(2);-webkit-transform:秤(2);} .step3 p { transform:比例尺(1);-webkit-transform:比例尺(1)opa city 3360 1；} .步骤4 p {-web kit-transform :旋转(360度)平移(0，-200 px)缩放(。3);变压器：旋转(360度)平移(0，-200px)比例(.3);opa城市3360 0；}写入JS，实现效果

var runPagerun page=new full page({ id : ' page contain '，//容器id slideTime : 800，//每页切换时间，以毫秒为单位连续： false，//是否循环(即从最后一页跳转到第一页)效果： {//滚动效果transform : { translate : ' Y '，//' x ' | ' Y ' |XY ' x轴|Y轴| XY轴| no scale3360 [.1]。//[scalefrom，scale to][开始缩放，结束缩放]旋转： [0，0]///[旋转自，旋转至][开始旋转角度，结束旋转角度]}，不透明度3360 [0，1]/[不透明度from，Opacityto][开始和结束时的透明度]}，模式： '滚轮，触摸，导航：navBar '，//将模式'滚轮，触摸，导航： navbar '更改为指示'滚轮，触摸，导航333330导航条'//，onswipestart:函数(index，本页){//触摸开头的回调函数//返回‘stop’；//}//，之前改：函数(索引，本页){//回调函数开头滑动//返回' stop '；//}//，回调：函数(索引，本页){//回调函数后滑动//alert(索引)；//};});详细的参数设置。

Id字符串外包装的id。

滑动时间整数(默认为：800)每页的切换时间(毫秒)。

效果对象(默认为： { })效果参数。

模式字符串(默认为： ' ')转换模式“滚轮、触摸、导航栏”表示“滚轮、触摸、导航栏：导航栏id”。

回调函数滑动后的回调函数。

港口

Fullpage还为使用该插件的开发人员提供了一些借口：

Prev()直接滑动到上一页。

下一页()直接滑动到下一页。

ThisPage()返回当前页码。

直接滑动到页码。

以上是关于实现类似网易邮箱的全屏滚动效果。希望你能做出适合你网站的全屏滚动效果。