在移动web，特别是在微信中，经常看到一种翻页动画效果，也称为场景动画。
一页一页的翻过，像在看书，每页的内容以各种 炫酷 的效果出现在你的眼里，配上一首动听的音乐，你有没有喜欢上呢。
这里没有音乐，没有炫酷的出场，只有实实在在的翻页。z
先看看效果（ 如果不能查看 复制下面的代码保存在本地查看 ）
一生就这么一次，
谈一场以结婚为目的的恋爱吧。
不再因为任性而不肯低头，
不再因为固执而轻言分手。
最后地坚信一次，一直走，就可以到白头。
惟愿这一生，执子之手，与子偕老。
你敢天长，我就敢地久。
深思熟虑之后我们决定
为爱情做出重要的延续
邀请您一起见证
先贴上代码， 仅供参考
/** * lbs slidepage 绝对定位方式 支持wp * date: 2014-11-20 * =================================================== * opts.el 外围包裹容器/滑动事件对象(一个字符串的css选择器或者元素对象) * opts.index 索引(默认0) 指定显示哪个索引的页 * opts.current 当前页添加的类名(默认'current') * opts.navshow 是否需要导航指示 默认false不需要 * opts.navclass 导航指示容器的类名 方便设置样式 (默认'slide-nav') * opts.auto 是否自动播放 默认false * opts.delay 自动播放间隔时间 默认5000(单位毫秒) 自动播放时有效 * opts.locked 是否锁定头尾滑动 默认false 如果开启则不能使用自动播放 * opts.effect 动画效果(平移=translate 缩放=scale 重叠=overlap) 默认平移 * opts.duration 动画持续时间 默认300(单位毫秒) * opts.minscale 动画效果为缩放时的最小缩放比率(0 ~ 1) 1为没有缩放效果 默认0.5 * opts.start 手指按下时 执行函数 * opts.move 手指移动中 执行函数 * opts.end 手指收起后 执行函数 * =================================================== * this.box 包裹页的容器对象 * this.index 当前索引 * this.length 有多少页 最后一页的索引为 this.length-1 * this.play 调用自动播放的方法 * this.stop 清除自动播放的方法 * this.up 手动调用向上滑动翻页的方法 方便增加点击按钮时调用 * this.down 手动调用向下滑动翻页的方法 * =================================================== **/;(function() { window.slidepage = function(opts) { opts = opts || {}; if (opts.el === undefined) return; this.box = typeof opts.el === 'string' ? document.queryselector(opts.el) : opts.el; this.pages = this.box.children; this.length = this.pages.length; if (this.length this.length - 1) opts.index = 0; this.body = document.getelementsbytagname('body')[0]; this.nav = null; this.navs = []; this.navshow = !!opts.navshow || false; this.navclass = opts.navclass || 'slide-nav'; this.index = this.oindex = opts.index || 0; this.current = opts.current || 'current'; this.locked = !!opts.locked || false; this.auto = !!opts.auto || false; this.auto && (this.delay = opts.delay || 5000); this.effect = opts.effect || 'translate'; this.duration = opts.duration || 300; this.minscale = opts.minscale || 0.5; this.start = opts.start || function() {}; this.move = opts.move || function() {}; this.end = opts.end || function() {}; this.timer = null; this.animated = true; this.touch = {}; this.point = ''; this.init(); }; slidepage.prototype = { init: function() { this.navshow && this.createnav(); this.initset(); this.bind(); }, createnav: function() { var li = null, i = 0; this.nav = document.createelement('ul'); for (; i 10) || y > this.height / 2) { this.slide(); } else { this.goback(); } this.end && this.end(); } }, css: function(o, n) { return getcomputedstyle(o, null)[n]; }, on: function(el, types, handler) { for (var i = 0, l = types.length; i < l; i++) el.addeventlistener(types[i], handler, false); }, setscale: function(index, v) { this.setstyle(this.pages[index], 'transform', 'scale(' + v + ')'); }, setorigin: function(index, dir) { this.setstyle(this.pages[index], 'transform-origin', dir); }, settransform: function(index, v) { this.setstyle(this.pages[index], 'transform', 'translate3d(0,' + v + 'px,0)'); }, settransition: function(index, v) { this.setstyle(this.pages[index], 'transition', 'all ' + v + 'ms'); }, setstyle: function(el, p, v) { var prefix = ['o', 'moz', 'ms', 'webkit', ''], i = 0, l = prefix.length; for (; i this.length - 1 && (this.index = 0); if (this.effect === 'scale') this.setorigin(this.oindex, 'center top'); this.animate(); }, down: function() { this.dis = -this.height; this.index--; this.index < 0 && (this.index = this.length - 1); if (this.effect === 'scale') this.setorigin(this.oindex, 'center bottom'); this.animate(); }, play: function() { var _this = this; if (this.locked) return; this.timer = setinterval(function() { _this.up(); }, this.delay); }, stop: function() { this.timer && clearinterval(this.timer); this.timer = null; } };}());查看完整代码
和以前写的 图片切换 有许多共同的地方，整个翻页和图片切换原理都是类似的。
这个支持自动播放，三种翻页效果，限制头尾滑动等。
翻页动画，就是在一个容器内滑动， 在这个容器中 每次只显示一页，每一页都有一些css3动画效果的元素出现。
一个简单的html结构如下：

类名为slide-box的div标签就是容器，类名为slide-page的section标签就是每个要翻的页。
this.box = typeof opts.el === 'string' ? document.queryselector(opts.el) : opts.el;this.pages = this.box.children;this.length = this.pages.length;
这里this.box就是容器，this.pages就是所有要翻的页。
this.height = document.documentelement.clientheight;this.box.style.height = this.height + 'px';for (var i = 0; i 10) || y > this.height / 2) { this.slide(); } else { this.goback(); } //.. }},//..
离开时（触摸，指针，鼠标）根据条件执行滑动切换。
//..slide: function() { var _this = this; this.animated = false; this.settransition(this.index, this.duration); this.settransition(this.oindex, this.duration); this.settransform(this.index, 0); if (this.effect === 'translate') this.settransform(this.oindex, -this.dis); if (this.effect === 'scale') this.setscale(this.oindex, this.minscale); settimeout(function() { if (_this.index !== _this.oindex) _this.update(); _this.animated = true; }, this.duration);},//..
滑动切换完成时会更新一些设置，比如为当前页增加当前标志类名。每页的css3动画元素也就可以根据这个类名执行动画效果。
//..update: function() { if (this.navshow) { this.navs[this.index].classname = this.current; this.navs[this.oindex].classname = ''; } this.pages[this.oindex].style.display = 'none'; this.pages[this.index].classname += ' ' + this.current; this.pages[this.oindex].classname = this.pages[this.oindex].classname.replace(this.current, '').trim(); this.clear(); this.oindex = this.index;},//..
切换了页，执行了每页的动画，整个场景动画就差不多完成了。
最后就是一些简单的了，自动播放什么的。
好了，到此结束。