$(window).on('hashchange', function (e) { var hash = location.hash; if (!hash) hash = '#page-1'; slide(hash.substring(1)); }); location.hash = '#page-1';

hashchange事件，在js代码中通过改变loaction.hash或者是点击下一页这样的超链接时，都会触发，所以只要在这个事件的回调去做滑屏切换即可。这样那些上一页和下一页的链接元素都不用加事件了。

hammer.js是一个手势库，支持常用的手势操作，使用简单，引入它的js之后，通过以下的方式来支持手势滑屏：

container = document.getElementById('container'), mc = new Hammer.Manager(container), Swipe = new Hammer.Swipe(); mc.add(Swipe); mc.on('swipeleft', function (e) { swipteTo('next', e); }); mc.on('swiperight', function (e) { swipteTo('prev', e); }); function swipteTo(slideType, e) { var $targetPage = $activePage[slideType]('.page'); $targetPage.length && (location.hash = '#' + $targetPage.attr('id')); }

把整个container元素作为滑屏的stage，监听到swipeleft事件，就表示向左滑，页面应该显示下一页；监听到swiperight事件，就表示向右滑，页面应该显示下一页。

animate.css的使用就不详细介绍了，比较简单，这是它的github地址：https://github.com/daneden/animate.css，是一个非常好用的动画库。本文把最近的一点工作经验记录了下来，技术上的东西，有的时候一些文字不能完全讲的清楚，所以我只能尽自己的能力去把一些问题讲地稍微细致一点，说的不对和有问题的尽管在评论区与我说明，我会认真查看，另外我自己对移动端这一块入门不深，您有更好的见解，欢迎与我们一起分享。谢谢您的阅读，马上就新年，祝您猴年大吉！

本文源码下载