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

基于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 文章编号文章编号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（） 执行对元素的操作。 　　示例： 　　$（thi