日期:2014-05-16  浏览次数:20391 次

js与jquery实现页面滑动效果

?

前言:

两个月前开始正式工作,之前对js只是听过,没有真正使用过,JQuery也只是听说过有这种东西(大学里太懒散了)由于工作需要,公司安排笔者做一个前端web页面仿iphone滑动效果,经过1个多月的努力,笔者总算是小有所成吧。

首先,笔者实现的是web页面跳转时以左右滑动效果取代直接跳转,其中包括对浏览器前进后退键的支持(即前进后退也支持左右滑动)。当前,目前有几款jquery插件已经实现了该效果,jquery-mobile,jqtouch,jquery-ui,这些插件肯定会比笔者自己写的代码更加可靠些。

?

实现该效果有四个文件需要引入,分别为:

1.??index.php(笔者自己写的首页,是实现滑动效果的基础页面)

2.??slide.js(笔者自己写的滑动效果js文件,里面是实现滑动效果的js代码,不过由于笔者还没怎么学js封装,可能在js大神们看来就像是小孩子捏的泥巴一样)

3.??jquery.js(jquery框架文件,可从http://docs.jquery.com/Downloading_jQuery下载最新版本)

4.??historyFrame.js(js文件是笔者从http://www.cnblogs.com/meteoric_cry/archive/2011/01/11/1933164.html上拷贝来的,功能是实现对浏览器hash值的监听以用来监控浏览器前进后退键