Prinsip karusel Hammer.js melaksanakan kemahiran function_javascript skrin gelongsor mudah

Baru-baru ini saya mempunyai tugas untuk membuat aplikasi h5 yang sangat kecil dengan hanya 2 skrin. Ia perlu melakukan pensuisan gelongsor skrin penuh mendatar dan beberapa kesan animasi mudah yang saya gunakan fullpage.js dan jquery untuk melakukan perkara seperti ini , dan prestasi Ia tidak begitu baik, jadi saya ingin membuat perkara mudah sendiri untuk melaksanakannya. Akhirnya, saya menggunakan zepto hammer.js dan karusel untuk menyelesaikan masalah ini Kesannya agak baik Apabila Gzip tidak didayakan pada keseluruhan halaman, saiz data semua permintaan sumber adalah kira-kira 200KB. Artikel ini meringkaskan idea pelaksanaan kaedah ini.

Demonstrasi kesan:

1. Perkara pelaksanaan

1) Skrin gelongsor dilukis pada pemalam karusel bootstrap, tetapi ia tidak begitu rumit kerana anda hanya perlu menggunakan idea pelaksanaan karuselnya

2) Pencetusan pensuisan skrin gelongsor adalah berbeza daripada PC biasanya dicetuskan oleh panggil balik klik elemen Untuk halaman skrin gelongsor, ia boleh diproses oleh peristiwa pertukaran cincang tetingkap, jadi selagi ia ditetapkan melalui hiperpautan Suis boleh dicetuskan dengan menukar titik sauh atau lokasi. hash melalui js

3) Memandangkan mudah alih perlu menyokong operasi gerak isyarat, anda boleh menggunakan pustaka isyarat hammer.js API ini sangat mudah dan mudah digunakan

4) Anda boleh menggunakan animate.css untuk kesan animasi, tetapi anda tidak perlu memasukkan semua kodnya ke dalam kod Anda hanya perlu menyalin kod yang berkaitan dengan kesan animasi yang diperlukan

5) Daripada jquery, zepto diutamakan;

6) Kesan skrin gelongsor menggunakan animasi peralihan Untuk membalas panggilan balik pada penghujung animasi, anda boleh mempertimbangkan untuk menggunakan transition.js ini juga merupakan alat yang disediakan oleh Bootstrap, tetapi ia hanya boleh digunakan dengan jquery secara lalai Anda perlu mengubahnya sedikit Digunakan bersama zepto.

Isi utama ini agak kasar, dan kandungan berikut akan memperkenalkannya secara terperinci satu demi satu.

2. struktur html

Struktur html halaman gelongsor kosong adalah seperti berikut:

html,

<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>

.bekas dan .halaman menggunakan kedudukan mutlak dan reka letak skrin penuh apabila dimulakan. Setiap bahagian.halaman mewakili halaman dan tidak dipaparkan secara lalai Semua halaman diletakkan pada kedudukan yang sama, yang bermaksud bahawa jika semua halaman dipaparkan, halaman ini akan bertindih.

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;
}

Struktur html halaman demo ialah:

Css berkaitan demo tidak akan dipaparkan. Antaranya, animasi diperlukan untuk menggunakan animate.css, iaitu perpustakaan animasi yang tersedia di github.

<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>

3. Idea pelaksanaan penukaran skrin gelongsor

Penukaran skrin gelongsor dicapai dengan mengawal dua halaman yang akan diluncurkan melalui js untuk menambah dan memadam kelas css yang ditakrifkan di bawah:

.halaman--aktif menunjukkan halaman yang sedang dipaparkan Selepas halaman dimulakan, gunakan panggilan js berikut untuk menambah .halaman—aktif:

ke halaman pertama.

.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);
}

这样页面默认就显示了第一页。以向左滑屏说明这些css的使用原理：

第一步，找到下一页的section，添加page--next类，将它定位当前页的右边，为滑屏做准备；

第二步，找到当前页的section，给它添加page--active-left，由于这个类改变了translate3D属性的值，所以当前页会往左滑动一屏；

在第二步的同时，给下一页的section，添加page--next-left，由于这个类改变了translate3D属性的值，所以下一页会往左滑动一屏；

第三步，在当前页跟下一页滑屏动画结束后，找到原来的当前页，移除掉page--active和page--active-left类；

在第三步的同时，找到下一页，移除掉page--next和page--next-left类，添加page--active。

gif图说明如下：

向右滑屏原理类似：

第一步，找到上一页的section，添加page--prev类，将它定位当前页的左边，为滑屏做准备；

第二步，找到当前页的section，给它添加page--active-right，由于这个类改变了translate3D属性的值，所以当前页会往右滑动一屏；

在第二步的同时，给上一页的section，添加page--prev-right，由于这个类改变了translate3D属性的值，所以上一页会往右滑动一屏；

第三步，在当前页跟上一页滑屏动画结束后，找到原来的当前页，移除掉page--active和page--active-right类；

在第三步的同时，找到上一页，移除掉page--prev和page--prev-right类，添加page--active。

综合以上实现原理，封装成JS函数如下：

var TRANSITION_DURATION = 400, sliding = false; function getSlideType($targetPage) {
var activePageId = $activePage.attr('id'),
targetPageId = $targetPage.attr('id');
return activePageId < targetPageId &#63; 'next' : activePageId == targetPageId &#63; '' : 'prev';
}
function slide(targetPageId) {
var $targetPage = $('#' + targetPageId);
if (!$targetPage.length || sliding) return;
var slideType = getSlideType($targetPage),
direction = slideType == 'next' &#63; '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在页面初始化的时候默认指定为第一页，在每次滑屏结束后都会更新成最新的当前页，所以调用的时候只要把目标页的ID传给slide函数即可。以上代码可能会有疑问的是：

1）$targetPage[0].offsetWidth的作用，这个代码用来触发浏览器的重绘，因为目标页原来是display: none的，如果不触发重绘的话，下一步添加css类后将看不到动画效果；

2）$.transitionEnd.end以及emulateTransitionEnd的作用，这个在下一部分说明。

4. 浏览器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是一个扩展了Zepto原型的一个方法，传入一个动画的过渡时间，当这个时间段过完之后，如果浏览器没有自动触发回调事件，called就始终是false，setTimeout会导致callback被调用，然后callback内部就会手动触发动画结束的回调。为什么要通过这个方式来模拟动画结束，是因为浏览器即使支持动画结束事件的回调，但是有些时候并不会触发这个事件，或者在动画结束后不能立即触发，影响回调的准确性。传入的duration应该与执行动画的元素，在css上设置的transtion-duration相同，注意以下代码中标黄的部分：

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;
}

5. hashchange事件

PC端滑屏都是给元素添加点击事件触发的，移动端可以利用window的hashchange事件：

$(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或者是点击2fc8db3327435aa54ad74d366b04c0cb下一页5db79b134e9f6b82c0b36e0489ee08ed这样的超链接时，都会触发，所以只要在这个事件的回调去做滑屏切换即可。这样那些上一页和下一页的链接元素都不用加事件了。

6. hammer.js使用简介

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

//初始化手势滑动
var 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'));
}

Gunakan keseluruhan elemen bekas sebagai peringkat gelongsor Apabila acara leret ke kiri didengar, ini bermakna halaman itu akan meluncur ke kiri, dan halaman tersebut harus memaparkan halaman seterusnya apabila acara leret ke kanan didengari halaman slaid ke kanan, dan halaman harus memaparkan halaman seterusnya.

7. Kesimpulan

Penggunaan animate.css tidak akan diperkenalkan secara terperinci. Ini adalah alamat githubnya: https://github.com/daneden/animate.css, yang sangat mudah. mudah untuk digunakan. Artikel ini merekodkan beberapa pengalaman kerja baru-baru ini kadang-kadang tidak dapat dijelaskan sepenuhnya dengan kata-kata, jadi saya hanya boleh melakukan yang terbaik untuk menerangkan beberapa isu dengan lebih terperinci Apa yang salah dan apa yang salah terangkan kepada saya di kawasan komen dan saya akan menyemaknya dengan teliti Selain itu, saya tidak begitu biasa dengan terminal mudah alih Jika anda mempunyai pandangan yang lebih baik, anda dialu-alukan untuk berkongsinya dengan kami. Terima kasih kerana membaca, dan tidak lama lagi Tahun Baru saya mengucapkan selamat maju jaya dalam Tahun Monyet!