Якщо ви хоч раз стикалися з мобільними пристроями з сенсорним екраном, то, швидше за все ви вже помічали цей ефект, щось на зразок перегортання блоку, сторінки, слайда, і т. д. Іншими словами, ви кладете палець на сенсор дисплея, і проводите його в якомусь напрямку. Як правило, це дійство відбувається миттєво, в якому напрямку. Раніше на нашому сайті вже був матеріал про те, як можна відстежувати touch події, а так само про можливості переміщення об’єктів за допомогою використання цих обробників подій. Для нашої поточної задачі ці знання нам допоможуть, тому що в даний момент часу в javascript немає спеціального обробника події “onswipe”. Було б зручно, якби воно було, але так як його немає, ми розглянемо інший варіант вирішення цієї задачі.
Отже, чим ми можемо скористатися, щоб визначити спробу користувача справити на сенсорі екрану дійство, яке традиційно називають swipe. Використовуючи наш попередній досвід, можемо визначити події дотику до сенсора, а так само одночасний “розмах” пальцем на сенсорі.
Як правила, давайте уточнимо, який рух по сенсорній поверхні ми будемо розглядати в якості команди swipe. В цьому діянні будуть причетні дві змінні, це відстань, прохідне пальцем по осі x або y, від моменту виникнення події touchstart до моменту touchend, а так само час, який знадобився для цього дії. Використовуючи ці дані, ми можемо вирішити, виробляв користувач дія, про яку ми говоримо, або ні.
Методом проби, ми можемо визначити середнє значення, яке проходить палець по сенсору для цього дії по горизонталі і вертикалі. Що стосується переміщення пальця по горизонталі, то значення відстані приблизно однакові, проте при переміщенні з ліва на право, швидкість значно вище, приблизно на 200 мс. Що стосується вертикалі, тут переміщення пальця по сенсору рекомендується визначати за умови не більше 100px, щоб не заважати іншим командам, внаслідок чого при цьому можуть бути проблеми з помилковим спрацьовуванням.
Приклад визначення команди «swipe» від лівого боку на праву (Для пристроїв, не оснащених сенсором, так само в прикладі реалізований симулятор для звичайної комп’ютерної миші).
window.addEventListener. (‘load’, function(){
var touchsurface = document.getElementById(‘touchsurface’),
startX,
startY,
dist,
threshold = 150, // мінімальна відстань для swipe
allowedTime = 200, // максимальний час проходження встановленого відстані
elapsedTime,
startTime
function handleswipe(isrightswipe){
if (isrightswipe)
touchsurface.innerHTML = ‘Ви перегорнули в праву сторону!‘
else{
touchsurface.innerHTML = ‘Гортання праворуч не виявлено.’
}
}
touchsurface.addEventListener. (‘touchstart’, function(e){
touchsurface.innerHTML =”
var touchobj = e.changedTouches[0]
dist = 0
startX = touchobj.pageX
startY = touchobj.pageY
startTime = new Date().getTime() // час контакту з поверхнею сенсора
e.preventDefault()
}, false)
touchsurface.addEventListener. (‘touchmove’, function(e){
e.preventDefault() // відключаємо стандартну реакцію скролінгу
}, false)
touchsurface.addEventListener. (‘touchend’, function(e){
var touchobj = e.changedTouches[0]
dist = touchobj.pageX – startX // отримуємо пройдену дистанцію
elapsedTime = new Date().getTime() – startTime // дізнаємося пройдене час
// перевіряємо витрачений час,горизонтальне переміщення >= threshold, і вертикальне переміщення <= 100
var swiperightBol = (elapsedTime = threshold && Math.abs(touchobj.pageY – startY) <= 100)
handleswipe(swiperightBol)
e.preventDefault()
}, false)
}, false)
Пролестните в праву сторону.
За події touchend ми перевіряємо, що відстань, яку пройшов вказівник на сенсорі від моменту події touchstart до touchend є позитивним числом, вище заданого порогу значення, в нашому випадку це 150. У той же час, ми відсіваємо можливе вертикальне рух менш 100px. Так як вертикальне переміщення курсору може бути вище початкової точки або нижче, ми використовуємо Math.abs().
Загальна функція визначення команди swipe.
У прикладі вище ми розглянули визначення команди swipe на сенсорних пристроях в напрямку правого боку. Крім цього можна визначати напрям вказівника на всі 4 сторони (вправо, вліво, вгору і вниз).
Приклад визначення команди «swipe» в будь-якому напрямку (для пристроїв, не оснащених сенсором, у прикладі реалізована підтримка звичайного курсору миші).
Код приклад визначення «swipe» на сенсорі в 4 напрямках:
window.addEventListener. (‘load’, function(){
var el = document.getElementById(‘touchsurface2’)
var inner = document.getElementById(‘inner’)
var hidetimer = null
swipedetect(el, function(swipedir){
if (swipedir != ‘none’){
clearTimeout(hidetimer)
// префікси для імен, прим. “leftarrow.png”, “rightarrow.png” і т. д.
var bgimage = swipedir + ‘arrow.png’
inner.style.background = ‘transparent url(‘ + bgimage + ‘) center center no-repeat’
hidetimer = setTimeout(function(){ // повернути фон через 1 сек.
inner.style.background =”
}, 1000)
}
})
}, false)
html-розмітка:
Проведіть пальцем
Ми пов’язуємо функцію swipedetect() для блоку з id #touchsurface2, при виникненні дії swipe проводитися зміна фонового зображення блоку div, таким чином, показуючи напрямок руху пальця.
Додав: htmaker, 05.09.2016 р.
(3 голосів, середній: 4,67 з 5)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
