移动web：翻页场景动画_html/css_WEB-ITnose

在移动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  1) return;                this.touch.disX = e.touches[0].pageX - this.touch.x;                this.touch.disY = e.touches[0].pageY - this.touch.y;            }            if (this.touch.fixed === '') {                if (Math.abs(this.touch.disY) > Math.abs(this.touch.disX)) {                    this.touch.fixed = 'up';                } else {                    this.touch.fixed = 'left';                }            }            if (this.touch.fixed === 'up') {                if (this.effect === 'scale') {                    this.scale = ((this.height - Math.abs(this.touch.disY)) / this.height).toFixed(3);                    this.scale  0) {                    if (this.locked && this.oIndex === 0) return;                    this.dis = -this.height;                    this.index = this.oIndex - 1;                    this.index  this.length - 1 && (this.index = 0);                    if (this.effect === 'scale') this.setOrigin(this.oIndex, 'center top');                }                if (this.nIndex !== undefined && this.nIndex !== this.index && this.nIndex !== this.oIndex) {                    this.pages[this.nIndex].style.display = 'none';                    this.pages[this.nIndex].style.zIndex = '';                    this.pages[this.nIndex].style.webkitTransform = this.pages[this.nIndex].style.transform = '';                }                this.nIndex = this.index;                this.pages[this.oIndex].style.zIndex = this.zIndex;                this.pages[this.index].style.zIndex = this.zIndex + 10;                this.setTransform(this.index, this.dis);                this.pages[this.index].style.display = 'block';                this.setTransform(this.index, this.touch.disY + this.dis);                if (this.effect === 'translate') this.setTransform(this.oIndex, this.touch.disY);                if (this.effect === 'scale') this.setScale(this.oIndex, this.scale);                this.move && this.move();            }        },        touchEnd: function(e) {            this.point = '';            if (this.index === this.oIndex) return;            if (this.touch.fixed === 'up') {                var Y = Math.abs(this.touch.disY);                if ((this.animated && Y > 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  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     
 和以前写的   图片切换     有许多共同的地方，整个翻页和图片切换原理都是类似的。 
    
这个支持自动播放，三种翻页效果，限制头尾滑动等。
    
 翻页动画，就是在一个容器内滑动， 在这个容器中 每次只显示一页，每一页都有一些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     
获取浏览器窗口的高，并设置容器和页的高为这个值。这个翻页是上下滑动，JS就没有获取宽度值了。
    
容器宽用css设置为width:100%，做个最大宽度限制为max-width:640px，这可根据实际情况设置。
    
现在切换翻页，当手指在容器滑动时，这里为判断上下滑动，满足滑动一定距离，手指离开容器时，开始翻页。
    
触摸事件：手指移入，手指移动，手指离开
    
指针事件：指针按下，指针移动，指针收起
    
鼠标事件: 鼠标按下，鼠标移动，鼠标收起
    
//..bind: function() {    var _this = this;    this.on(this.box, ['touchstart', 'pointerdown', 'mousedown'], function(e) {        _this.touchStart(e);         //..    });    this.on(this.box, ['touchmove', 'pointermove', 'mousemove'], function(e) {        _this.touchMove(e);        //..    });    this.on(this.box, ['touchend', 'touchcancel', 'pointerup', 'mouseup'], function(e) {        _this.touchEnd(e);        //..    });},//..
    
绑定了触摸事件，WP的指针事件，鼠标事件。
    
//..touchStart: function(e) {    this.point = e.type.indexOf('down')     
获取移入时的初始位置（触摸，指针，鼠标）
    
//..touchMove: function(e) {    //..    if (this.touch.fixed === 'left') return;    //..    if (this.point === 'pointer') {        this.touch.disX = e.pageX - this.touch.x;        this.touch.disY = e.pageY - this.touch.y;    }else if (this.point === 'touch') {        //..        this.touch.disX = e.touches[0].pageX - this.touch.x;        this.touch.disY = e.touches[0].pageY - this.touch.y;    }    if (this.touch.fixed === '') {        if (Math.abs(this.touch.disY) > Math.abs(this.touch.disX)) {            this.touch.fixed = 'up';        } else {            this.touch.fixed = 'left';        }    }    if (this.touch.fixed === 'up') {        //..    }},//..
    
移动时（触摸，指针，鼠标）获取移动了多少距离，根据距离判断向左右还是上下移动的，这里翻页只要上下移动。
    
//..if (this.touch.fixed === 'up') {    if (this.effect === 'scale') {        this.scale = ((this.height - Math.abs(this.touch.disY)) / this.height).toFixed(3);        this.scale  0) {        if (this.locked && this.oIndex === 0) return;        this.dis = -this.height;        this.index = this.oIndex - 1;        this.index  this.length - 1 && (this.index = 0);        if (this.effect === 'scale') this.setOrigin(this.oIndex, 'center top');    }    if (this.nIndex !== undefined && this.nIndex !== this.index && this.nIndex !== this.oIndex) {        this.pages[this.nIndex].style.display = 'none';        this.pages[this.nIndex].style.zIndex = '';        this.pages[this.nIndex].style.webkitTransform = this.pages[this.nIndex].style.transform = '';    }    this.nIndex = this.index;    this.pages[this.oIndex].style.zIndex = this.zIndex;    this.pages[this.index].style.zIndex = this.zIndex + 10;    this.setTransform(this.index, this.dis);    this.pages[this.index].style.display = 'block';    this.setTransform(this.index, this.touch.disY + this.dis);    if (this.effect === 'translate') this.setTransform(this.oIndex, this.touch.disY);    if (this.effect === 'scale') this.setScale(this.oIndex, this.scale);    this.move && this.move();}//..移动中
    
移动中做了很多事情，是整个程序比较重要的部分。在上下移动时，当前显示的页跟着移动，向上移动时，下一页显示出来一部分，向下移动时，上一页显示一部分。
    
如果锁定了头尾，第一页向下移动时不能移动，同样最后一页向上移动时不能移动。
    
opts.effect 动画效果(平移=translate 缩放=scale 重叠=overlap) 默认平移
    
根据每种翻页效果做初始化设置(如果只需要简单的平移切换可以省去很多代码)。
    
//..touchEnd: function(e) {    this.point = '';    if (this.index === this.oIndex) return;    if (this.touch.fixed === 'up') {        var Y = Math.abs(this.touch.disY);        if ((this.animated && Y > 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;},//..
    
切换了页，执行了每页的动画，整个场景动画就差不多完成了。
    
最后就是一些简单的了，自动播放什么的。
    
好了，到此结束。