xml地图|网站地图|网站标签 [设为首页] [加入收藏]

轮播原理实现简洁的滑屏功能,利用轮播原理结

来源:http://www.ccidsi.com 作者:最新解决方案 人气:98 发布时间:2019-05-02
摘要:选拔轮播原理结合hammer.js完毕简洁的滑屏作用 2016/02/02 · JavaScript· 滑屏 初稿出处: 流云诸葛    近来有个职责,做三个极小的h5的使用,唯有2屏,须要做横向的全屏滑动切换和部分轻

选拔轮播原理结合hammer.js完毕简洁的滑屏作用

2016/02/02 · JavaScript · 滑屏

初稿出处: 流云诸葛   

近来有个职责,做三个极小的h5的使用,唯有2屏,须要做横向的全屏滑动切换和部分轻易的动画效果,以前做那种东西用的是fullpage.js和jquery,质量不是很好,于是就想和睦出手弄二个简短的东西来得以完结。最终作者用zepto

  • hammer.js 和轮播的办法消除了这么些难点,效果还不易,整个页面不开启Gzip时具备能源请求的数额大小为200KB左右。那篇小说总计下这些措施的贯彻思路。

作用演示(代码下载):

图片 1

选择轮播原理结合hammer.js达成简洁的滑屏效能,hammer.js

近日有个职责,做一个不行小的h5的应用,唯有二屏,须求做横向的全屏滑动切换和一些粗略的卡通片效果,此前做那种东西用的是fullpage.js和jquery,质量不是很好,于是就想本身入手弄3个大约的东西来落到实处。最终本身用zepto

  • hammer.js 和轮播的法门缓和了这一个主题材料,效果还行,整个页面不开启Gzip时具备财富请求的数量大小为200KB左右。那篇作品总括下那些格局的落到实处思路。

意义务演出示(代码下载):

<div id="container" class="container"> <section id="page-1" class="page page--1"> </section> <section id="page-2" class="page page--2"> </section> <section id="page-3" class="page page--3"> </section> </div>

html,
body {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}

.container,
.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page {
    overflow: hidden;
    display: none;
    -webkit-transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.container与.page先导化的时候利用相对定位,全屏布局。每一个section.page代表①页,并且私下认可不出示,全体页的原则性都一致,也正是说如若具备页都显示的话,这么些页会重叠在一块。

demo页的html结构是:

<div id="container" class="container">
    <section id="page-1" class="page page--1">
        <div class="page__jump"><a href="#page-2" title="">下一页</a></div>
        <p class="page__num animated">1</p>
    </section>
    <section id="page-2" class="page page--2">
        <div class="page__jump"><a href="#page-1" title="">上一页</a><a href="#page-3" title="">下一页</a></div>
        <p class="page__num animated">2</p>
    </section>
    <section id="page-3" class="page page--3">
        <div class="page__jump"><a href="#page-2" title="">上一页</a></div>
        <p class="page__num animated">3</p>
    </section>
</div>

demo相关的css就不显得了。个中animated是利用animate.css须求的,animate.css是二个动画片库,github上有。

多年来有个职分,做二个越来越小的h5的施用,唯有贰屏,须求做横向的全屏滑动切换和一些轻易易行的卡通效果,在此之前做那种事物用的是fullpage.js和jquery,质量不是很好,于是就想本人出手弄2个简约的事物来贯彻。最终本身用zepto

一. 得以落成核心

一)滑屏借鉴bootstrap的carousel插件,可是完全未有它可怜复杂,只须要引以为鉴它的轮播实现思路就能够;

二)滑屏切换的触及,跟PC差别等,PC平日都是经过元素的点击回调来触发,对于滑屏的页面,完全能够动用window的hashchange事件来管理,这样壹旦经过超链接设置锚点恐怕通过js退换location.hash就会接触切换;

3)挂念到移动还得辅帮手势操作,能够行使hammer.js这些手势库,API相当轻便易用;

四)动画效果能够用animate.css,不过并非把它具备的代码都弄到代码里,只要求拷贝要求的卡通片效果相关的代码就可以;

5)替代jquery,首选zepto;

6)滑屏效果使用transition动画,为了能够响应动画甘休的回调,能够考虑接纳transition.js,那么些也是Bootstrap提供的工具,可是它私下认可只好跟jquery使用,要对它多少改换一下才具跟zepto联合使用。

那几个要点说的可比粗糙,前边的始末会相继详细介绍。

三. 滑屏切换的贯彻思路

滑屏切换即是经过js调控2个要滑动的页增删以下定义的那有的css类完结的:

.page.page--active,
.page.page--prev,
.page.page--next {
    display: block;
}

.page.page--next,
.page.page--active.page--active-right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.page.page--prev,
.page.page--active.page--active-left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.page.page--next.page--next-left,
.page.page--prev.page--prev-right,
.page.page--active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.page--active代表目前显示的页,页面早先化后,通过以下js调用,给第一页加上.page—active:

var $activePage;

//初始化显示第一页
(function () {
    $activePage = $('#page-1');
    $activePage.addClass('page--active');
})();

诸如此类页面默许就显得了第贰页。以向左滑屏表达这几个css的选拔原理:

第一步,找到下一页的section,增加page--next类,将它一定当前页的左侧,为滑屏做图谋;

其次步,找到当前页的section,给它增添page--active-left,由于这么些类改造了translate3D属性的值,所以当前页会往左滑动一屏;

在第2步的同时,给下一页的section,增添page--next-left,由于这几个类改变了translate3D属性的值,所以下一页会往左滑动1屏;

其三步,在当前页跟下1页滑屏动画结束后,找到原来的当前页,移除掉page--active和page--active-left类;

在第一步的还要,找到下1页,移除掉page--next和page--next-left类,增多page--active。

gif图表明如下

var TRANSITION_DURATION = 400, sliding = false;

function getSlideType($targetPage) {
    var activePageId = $activePage.attr('id'),
            targetPageId = $targetPage.attr('id');
    return activePageId < targetPageId ? 'next' : activePageId == targetPageId ? '' : 'prev';
}

function slide(targetPageId) {
    var $targetPage = $('#'   targetPageId);
    if (!$targetPage.length || sliding) return;

    var slideType = getSlideType($targetPage),
            direction = slideType == 'next' ? 'left' : 'right';
    if (slideType == '') return;

    sliding = true;
    $targetPage.addClass('page--'   slideType);
    $targetPage[0].offsetWidth;
    $activePage.addClass('page--active-'   direction);
    $targetPage.addClass('page--'   slideType   '-'   direction);

    $activePage
            .one($.transitionEnd.end, function () {
                $targetPage.removeClass(['page--'   slideType, 'page--'   slideType   '-'   direction].join(' ')).addClass('page--active');
                $activePage.removeClass(['page--active', 'page--active-'   direction].join(' '));
                $activePage = $targetPage;
                sliding = false;
            })
            .emulateTransitionEnd(TRANSITION_DURATION);
}

由于$activePage在页面起先化的时候暗中同意内定为第2页,在历次滑屏甘休后都会更新成最新的当前页,所以调用的时候假如把目的页的ID传给slide函数就可以。以上代码可能会有疑问的是:

1)$targetPage[0].offsetWidth的职能,那些代码用来触发浏览器的重绘,因为目的页原来是display: none的,要是不接触重绘的话,下一步增添css类后将看不到动画效果;

贰)$.transitionEnd.end以及emulateTransitionEnd的功能,这一个在下局地证实。

  • hammer.js 和轮播的主意缓和了这些难题,效果还不易,整个页面不开启Gzip时具有能源请求的数据大小为200KB左右。那篇小说计算下这几个办法的贯彻思路。

2. html结构

空的滑屏页的html结构是这么的:

XHTML

<div id="container" class="container"> <section id="page-1" class="page page--1"> </section> <section id="page-2" class="page page--2"> </section> <section id="page-3" class="page page--3"> </section> </div>

1
2
3
4
5
6
7
8
<div id="container" class="container">
    <section id="page-1" class="page page--1">
    </section>
    <section id="page-2" class="page page--2">
    </section>
    <section id="page-3" class="page page--3">
    </section>
</div>

html, body { height: 100%; -webkit-tap-highlight-color: transparent; } .container, .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .page { overflow: hidden; display: none; -webkit-transition: -webkit-transform .4s ease; transition: transform .4s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html,
body {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}
 
.container,
.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
 
.page {
    overflow: hidden;
    display: none;
    -webkit-transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.container与.page开首化的时候利用相对定位,全屏布局。每二个section.page代表一页,并且默许不显得,全部页的固化都1模同样,也正是说要是持有页都展现的话,这一个页会重叠在一块。

demo页的html结构是:

XHTML

<div id="container" class="container"> <section id="page-1" class="page page--1"> <div class="page__jump"><a href="#page-2" title="">下一页</a></div> <p class="page__num animated">1</p> </section> <section id="page-2" class="page page--2"> <div class="page__jump"><a href="#page-1" title="">上一页</a><a href="#page-3" title="">下一页</a></div> <p class="page__num animated">2</p> </section> <section id="page-3" class="page page--3"> <div class="page__jump"><a href="#page-2" title="">上一页</a></div> <p class="page__num animated">3</p> </section> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="container" class="container">
    <section id="page-1" class="page page--1">
        <div class="page__jump"><a href="#page-2" title="">下一页</a></div>
        <p class="page__num animated">1</p>
    </section>
    <section id="page-2" class="page page--2">
        <div class="page__jump"><a href="#page-1" title="">上一页</a><a href="#page-3" title="">下一页</a></div>
        <p class="page__num animated">2</p>
    </section>
    <section id="page-3" class="page page--3">
        <div class="page__jump"><a href="#page-2" title="">上一页</a></div>
        <p class="page__num animated">3</p>
    </section>
</div>

demo相关的css就不显得了。在那之中animated是使用animate.css需求的,animate.css是一个动画库,github上有。

四. 浏览器css动画停止的回调及模拟

bootstrap提供了八个工具,transition.js,用来判别浏览器是不是帮忙css动画回调事件,以及在浏览器未有在动画停止后自动触发回调的非凡景况下通过模拟的法子来手动触发回调,原先这么些工具只好合作jquery使用,为了在zepto中动用,必须稍微退换一下,上边正是改换之后的代码:

(function(){
    var transition = $.transitionEnd =  {
        end: (function () {
            var el = document.createElement('transitionEnd'),
                transEndEventNames = {
                    WebkitTransition: 'webkitTransitionEnd',
                    MozTransition: 'transitionend',
                    OTransition: 'oTransitionEnd otransitionend',
                    transition: 'transitionend'
                };

            for (var name in transEndEventNames) {
                if (el.style[name] !== undefined) {
                    return transEndEventNames[name];
                }
            }
            return false;
        })()
    };

    $.fn.emulateTransitionEnd = function (duration) {
        var called = false,
            _this = this,
            callback = function () {
                if (!called) $(_this).trigger(transition.end);
            };

        $(this).one(transition.end, function () {
            called = true;
        });

        setTimeout(callback, duration);
        return this;
    };
})();

$.transitionEnd.end表示目前浏览器帮衬的卡通甘休事件的称谓。$.fn.emulateTransitionEnd是1个恢弘了Zepto原型的3个方法,传入1个卡通的连片时间,当以此时间段过完之后,纵然浏览器未有自动触发回调事件,called就平昔是false,setTimeout会导致callback被调用,然后callback内部就能手动触发动画截止的回调。为何要因而这几个格局来效仿动画停止,是因为浏览器便是匡助动画甘休事件的回调,可是多少时候并不会接触那么些事件,可能在动画甘休后无法立刻触发,影响回调的准头。传入的duration应该与施行动画的要素,在css上设置的transtion-duration同样,注意以下代码中标黄的1对:

var 

TRANSITION_DURATION = 400

;
$activePage
            .one($.transitionEnd.end, function () {
                $targetPage.removeClass(['page--'   slideType, 'page--'   slideType   '-'   direction].join(' ')).addClass('page--active');
                $activePage.removeClass(['page--active', 'page--active-'   direction].join(' '));
                $activePage = $targetPage;
                sliding = false;
            })
            .emulateTransitionEnd(TRANSITION_DURATION);

.page {
    overflow: hidden;
    display: none;
    -webkit-transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

成效演示:

3. 滑屏切换的兑现思路

滑屏切换正是经过js调整贰个要滑动的页增删以下定义的那有些css类已毕的:

.page.page--active, .page.page--prev, .page.page--next { display: block; } .page.page--next, .page.page--active.page--active-right { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .page.page--prev, .page.page--active.page--active-left { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .page.page--next.page--next-left, .page.page--prev.page--prev-right, .page.page--active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

1
2
3
4
5
6
7
8
9
10