基于JQuery的触屏滑动翻页Web前端开发

徐华平++汪春霞

摘 要：随着移动互联网时代的来临，使用各类移动终端浏览Web应用逐渐成为主流趋势，而传统的面向计算机基于点击翻页模式的Web浏览模式越来越不适应智能终端触屏滑动翻页的需求。介绍一种通过使用JQuery及其组件FullPage.js与Move.js实现滚动翻页的技术。这一技术不仅实现了流畅的触屏滚动翻页效果，而且前端开发人员无需书写大量CSS样式、JavaScript代码并实现了多浏览器的良好兼容，提高了前端开发效率。

关键词：JQuery；FullPage.js；Move.js；Web前端；JavaScript

DOIDOI：10.11907/rjdk.1511455

中图分类号：TP301

文献标识码：A 文章编号文章编号：16727800（2015）012002003

作者简介作者简介：徐华平（1977-），男，江苏盐城人，硕士，盐城师范学院信息工程学院教育技术学系讲师，研究方向为数字媒体技术、智慧教育、Web2.0；汪春霞（1980-） ，女，江苏盐城人，盐城市教育局现代教育技术中心教师，研究方法为教育信息化、智慧教育。

0 引言

自1991年8月6日世界上第一个网页正式上线至今，Web的设计与开发技术有了长足的进步[1]。然而，随着各类智能移动终端以及人机交互方式的出现，传统的基于鼠标点击翻页的Web展示技术已经不能适应诸如智能手机、平板电脑等触屏终端的交互需求。而当前主流前端开发技术中，开发人员需要书写大量的JavaScript、CSS3动画代码来实现触屏滑动翻页（鼠标滚动翻页）与页面动画效果，即使开发实现了上述效果仍然面临代码可复用性低、兼容性差等困难。JQuery及其组件FullPage.js、Move.js的出现为开发触屏滑动翻页及页面动画提供了一个简洁、高效的新开发途径。

1 JQuery及其组件

JQuery是一个兼容多浏览器的JavaScript库，其核心理念是write less，do more（写得更少，做得更多）。JQuery于2006年1月由美国人John Resig在纽约的barcamp上发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，JQuery已经成为最流行的JavaScript库，在世界前10 000个访问最多的网站中，有超过55%的网站在使用Jquery[2]。

1.1 JQuery的特点与优势

JQuery具有如下特点：①可以轻松实现类似与CSS3动画的动态特效；②通过 JQuery AJAX 方法，能使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能将这些外部数据直接载入网页的被选元素中；③通过插件来扩展；④方便的工具，例如浏览器版本判断；⑤渐进增强；⑥链式调用；⑦多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6，7，8的支持）[3]。

1.2 FullPage.js组件

如今经常能见到各类全屏网站，这些网站用几幅很大的图片或色块作背景，再添加一些简洁内容，显得格外引入注目。比如 iPhone 5C 的介绍页面，QQ浏览器的官方网站。FullPage.js的出现为开发人员设计这种风格类型的网站提供了一种便捷途径。FullPage.js 是一个基于 JQuery 的插件，能够很高效、轻松地制作出全屏网站。其主要功能有：支持鼠标滚动；支持前进后退和键盘控制；多个回调函数；支持手机、平板触摸事件；支持 CSS3 动画；支持窗口缩放；窗口缩放时自动调整。

1.3 Move.js组件

CSS3 的过渡和动画是当前创建轻量级动画的首选方法。然而，很多开发者发现CSS3的语法较复杂，HTML5实现的动画效果无法兼容低版本的浏览器。Move.js是使用简单函数创建CSS3动画的一个简单的JavaScript库。

2 JQuery组件的常用API

2.1 JQuery基本语法

通过 JQuery，可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。JQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

基础语法是：$（selector）.action（），其中美元符号定义 Jquery，选择符（selector）“查询”和“查找”HTML元素，JQuery的action（） 执行对元素的操作。

示例：

$（this）.hide（） //隐藏当前元素

$（"p"）.hide（） //隐藏所有段落

$（".demo"）.hide（） // 隐藏所有 class="demo" 的所有元素

$（"#demo"）.hide（） // 隐藏所有 id="demo" 的元素

2.2 FullPage.js的配置及API

Fullpage提供了近30项配置参数，常用的配置参数有：verticalCentered默认值为true，该配置项设置内容垂直居中；slidesColor配置项的类型为函数，用于设置背景颜色；navigation配置项为字符型，设置是否显示导航；navigationPosition配置项设置导航按钮的位置等。

Fullpage提供的方法主要有：①方法moveSectionUp（）、moveSectionDown（），分别实现向上、向下滚动；②moveTo（section， slide）方法，实现滚动到指定section和slide；③moveSlideRight（）、moveSlideLeft（）方法，分别实现向右滚动、向左滚动；④setAutoScrolling（）方法，实现自动滚动。

Fullpage提供的回调函数及其功能如下：①afterLoad是滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算；②onLeave是滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数，index 是离开的“页面”的序号，从1开始计算。nextIndex 是滚动到的“页面”的序号，从1开始计算。direction 判断往上滚动还是往下滚动，值是 up 或 down；③afterRender是页面结构生成后的回调函数，或者说页面初始化完成后的回调函数；④afterSlideLoad是滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数；⑤onSlideLeave是某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数。

2.3 Move.js组件API

Move.js提供了创建CSS3动画的最简单的JavaScript API。假设有一个带类box的div元素，当鼠标移动到Div上面时需要从左侧移动元素100个像素。代码如下所示：

.box {

-webkit-transition： margin 1s；

-moz-transition： margin 1s；

-o-transition： margin 1s；

transition： margin 1s；

}

.box：hover {

margin-left： 100px；

}

使用 Move.js 可以简单调用 set（）方法实现同样的结果，如下：

move（'.box'） //选择需要添加动画效果的对象

.set（'margin-left'， 100） //设置.box的margin-left属性的值为100像素

.end（）；//触发动画

通过上述示例可知Move.js在创建动画效果方面摆脱了混乱的CSS3，给前端开发带来了极大的便利，Move.js提供的常见方法有：（set（prop， val）方法，set（）方法用于设置元素的css属性，其带有两个参数：css属性和属性值；（add（prop， val），add（）方法用来增加其已经设置的属性值。该方法必须数值型值，以便用来增加。该方法必须有两个参数：属性值和其增量（sub（prop， val），sub（）是add（）的逆过程，它接受两个相同的参数，但其值将从属性值中减去；④duration（n），通过该方法，可以设置动画播放时间。

3 全屏滚动翻页Web页设计步骤

3.1 引入组件

需要在页面中使用本文介绍的JQuery库以及组件FullPage.js和Move.js，需在页面中引入，引用这类组件的方法与在页面中应用JavaScript脚本的方法一致，如下所示：

3.2 HTML

举例说明需要实现触摸翻页的页面基本结构如下，将原来传统模式下放在不同“页”中的内容放置于一个页面的数个“屏”中，该页面最外层父容器的id为fullpage，每一“屏”放置于父容器的一个类为section的子容器中，如果该“屏”需设置横向滚动“屏”，可在其中再添加数个类为slide的容器，代码如下：

第一屏

第二屏

第三屏的第一屏

第三屏的第二屏

…..

第四屏

……

3.3 JavaScript

在HTML页面的底部，嵌入触摸翻页及页面动画效果代码或创建外包JS文件并在HTML底部调用。该环节的主要作法为使用$选择符选择当前文档（document）为对象，创建ready函数确保页面载入时执行其中的事件，各个“屏”的滚动事件及页面效果主要在afterLoad和onLeave回调函数中实现。

$（document）.ready（function（） {

$（'#fullpage'）.fullpage（{

'verticalCentered'： false，//内容垂直居中

'css3'： true，//模拟css3动画效果

anchors： ['page1'， 'page2'， 'page3'， 'page4']，//定义每屏的锚链接

'navigation'： true，//允许显示导航按钮

'navigationPosition'： 'right'，//右侧显示导航按钮

afterLoad：function（link，index）{ //使用afterLoad回调函数设置每屏载入时的效果

switch（index）

{

case 1：//第一屏载入时的动画效果

$（".home .peak"）.hide（）；

move（'.home .banner1h3'）.set（'margin-top'，'10px'）.end（）；

move（'.home .banner1h3'）.set（'filter'，' alpha（opacity=100）'）.end（）；

case 2：//第二屏载入时的动画效果

…..

}）

onLeave：function（link，index）{ 使用onLeave回调函数设置离开每屏时的效果

switch（index）

{

case 1：// 离开第一屏时的动画效果（复位CSS样式等）

$（".home .peak"）.show（）；

move（'.home .banner1h3'）.set（'margin-top'，'60px'）.end（）；

move（'.home .banner1h3'）.set（'filter'，' alpha（opacity=45）'）.end（）；

move（'.home .banner1h3'）.set（'opacity'，'0.45'）.end（）；

case 2：

…..

}）

4 结语

传统的点击翻页模式已经无法满足各类智能终端的触屏交互模式，急需要一种快捷、高效的途径解决既能满足PC鼠标交互又能满足触屏滑动滚动交互的Web前端开发技术。本文通过使用JQuery及其组件FullPage.js与Move.js实现的滚动翻页的技术，不仅实现了流畅的触屏滚动翻页效果，而且免去了前端开发人员书写大量CSS样式、JavaScript代码，并实现了多浏览器的良好兼容，提高了前端开发的效率。

参考文献参考文献：

[1] 世界上第一个网页的诞生[EB/OL].http：//www.techweb.com.cn/news/20120806/1222697.shtml.

[2] Jquery [EB/OL]. http：//baike.baidu.com/history/jQuery/92124100.

[3] 潘杰，周传生. 基于jQuery框架的Web研究与实现[J]. 沈阳师范大学学报：自然科学版，2015，01：9699.

[4] 李璟.基于.NET的分层架构及抽象工厂模式在Web开发中的应用[J].软件导刊，2015，14 （4）：105107.

（责任编辑：陈福时）