js & touch & swiper
js & touch & swiper
https://developer.mozilla.org/en/docs/Web/API/Touch_events
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2019-01-01
*
* @description touchApp
* @augments
* @example
*
*/
function load() {
document.addEventListener("touchstart", touch, false);
document.addEventListener("touchmove", touch, false);
document.addEventListener("touchend", touch, false);
function touch(event) {
var event = event || window.event;
var oInp = document.getElementById("inp");
switch (event.type) {
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}
}
window.addEventListener("load", load, false);
// const touchApp = (datas = [], debug = false) => {
// let result = ``;
// // do something...
// return result;
// };
// export default touchApp;
// export {
// touchApp,
// };
single click
the order of events
touchstart
touchmove
touchend
mouseover
mousemove
mousedown
mouseup
click
https://www.html5rocks.com/en/mobile/touchandmouse/
https://www.w3schools.com/jsref/obj_touchevent.asp
http://javascriptkit.com/javatutors/touchevents.shtml
http://fabricjs.com/touch-events
http://tutorials.jenkov.com/responsive-mobile-friendly-web-design/touch-events-in-javascript.html
https://hammerjs.github.io/touch-emulator/
https://github.com/hammerjs/touchemulator
Swiper
https://idangero.us/swiper/get-started/
https://github.com/nolimits4web/swiper/blob/master/src/swiper.js
// Swiper Class
import Swiper from './components/core/core-class';
// Core Modules
import Device from './modules/device/device';
import Support from './modules/support/support';
import Browser from './modules/browser/browser';
import Resize from './modules/resize/resize';
import Observer from './modules/observer/observer';
//IMPORT_COMPONENTS
const components = [
Device,
Support,
Browser,
Resize,
Observer,
//INSTALL_COMPONENTS
];
if (typeof Swiper.use === 'undefined') {
Swiper.use = Swiper.Class.use;
Swiper.installModule = Swiper.Class.installModule;
}
Swiper.use(components);
//EXPORT
demo
https://codepen.io/webgeeker/pen/rEZPGV
javascript swipe event
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events
https://css-tricks.com/simple-swipe-with-vanilla-javascript/
http://www.javascriptkit.com/javatutors/touchevents2.shtml
http://javascriptkit.com/javatutors/touchevents.shtml
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function getTouches(evt) {
return evt.touches || // browser API
evt.originalEvent.touches; // jQuery
}
function handleTouchStart(evt) {
const firstTouch = getTouches(evt)[0];
xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
} else {
/* right swipe */
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
} else {
/* down swipe */
}
}
/* reset values */
xDown = null;
yDown = null;
};
class Swipe {
constructor(element) {
this.xDown = null;
this.yDown = null;
this.element = typeof(element) === 'string' ? document.querySelector(element) : element;
this.element.addEventListener('touchstart', function(evt) {
this.xDown = evt.touches[0].clientX;
this.yDown = evt.touches[0].clientY;
}.bind(this), false);
}
onLeft(callback) {
this.onLeft = callback;
return this;
}
onRight(callback) {
this.onRight = callback;
return this;
}
onUp(callback) {
this.onUp = callback;
return this;
}
onDown(callback) {
this.onDown = callback;
return this;
}
handleTouchMove(evt) {
if ( ! this.xDown || ! this.yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
this.xDiff = this.xDown - xUp;
this.yDiff = this.yDown - yUp;
if ( Math.abs( this.xDiff ) > Math.abs( this.yDiff ) ) { // Most significant.
if ( this.xDiff > 0 ) {
this.onLeft();
} else {
this.onRight();
}
} else {
if ( this.yDiff > 0 ) {
this.onUp();
} else {
this.onDown();
}
}
// Reset values.
this.xDown = null;
this.yDown = null;
}
run() {
this.element.addEventListener('touchmove', function(evt) {
this.handleTouchMove(evt).bind(this);
}.bind(this), false);
}
}
class demo
// Use class to get element by string.
var swiper = new Swipe('#my-element');
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();
// Get the element yourself.
var swiper = new Swipe(document.getElementById('#my-element'));
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();
// One-liner.
(new Swipe('#my-element')).onLeft(function() { alert('You swiped left.') }).run();
https://codepen.io/ganmahmud/pen/RaoKZa
swiper
https://github.com/nolimits4web/swiper
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
js & touch & swiper的更多相关文章
- Zepto.js touch模块深入分析
目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...
- iScroll.js和swiper.js
最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...
- H5 适配 动画animation js touch
图片预加载jquery插件 jquery.imgpreload var load_img = [];load_img.push('http://m.pubuzhixing.com/Images/vot ...
- js Touch事件(向左滑动,后退)
js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev) ...
- js touch触屏原理分析
之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理.事实上,大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一:对于Touch的处理”,我想这 ...
- 《.NET最佳实践》与Ext JS/Touch的团队开发
概述 持续集成 编码规范 测试 小结 概述 有不少开发人员都问过我,Ext JS/Touch是否支持团队开发?对于这个问题,我可以毫不犹豫的回答:支持.原因是在Sencha官网博客中客户示例中,有不少 ...
- Vue.js 使用 Swiper.js 在 iOS 11 时出现错误
前言 在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误: Synt ...
- web & js & touch & gesture
web & js & touch & gesture 触摸 & 手势 https://caniuse.com/#feat=touch js https://develo ...
- js & touch & pull down & load more
js & touch & pull down & load more https://www.jianshu.com/p/93597d6bd77d index-list htt ...
随机推荐
- Language Guide (proto3) | proto3 语言指南(五)使用其他消息类型
Using Other Message Types - 使用其他消息类型 可以将其他消息类型用作字段类型.例如,假设您希望在每个SearchResponse消息中包含Result消息--为此,您可以在 ...
- (十二)整合 Shiro 框架,实现用户权限管理
整合 Shiro 框架,实现用户权限管理 1.Shiro简介 1.1 基础概念 1.2 核心角色 1.3 核心理念 2.SpringBoot整合Shiro 2.1 核心依赖 2.2 Shiro核心配置 ...
- (6)dd命令安装Linux
1.面对大批量服务器的安装,人们往往热衷于选择"无人值守安装"的方式,而此方式需要对服务器进行过多的配置,并不适合初学者. 无人值守安装(Kickstart),又称全自动安装,其工 ...
- nginx反向代理signalr
asp.net core应用常常要通过nginx来反向代理, 普通的web api配置asp.net core反向代理比较常见, 如果在应用中集成了signalr, 如何使用nginx来反代呢? ng ...
- bootstrap实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- P2062 分队问题(DP)
题目描述 给定n个选手,将他们分成若干只队伍.其中第i个选手要求自己所属的队伍的人数大等于a[i]人. 在满足所有选手的要求的前提下,最大化队伍的总数. 注:每个选手属于且仅属于一支队伍. 输入输出格 ...
- hdu5501 The Highest Mark
Problem Description The SDOI in 2045 is far from what it was been 30 years ago. Each competition has ...
- Acwing 154 滑动窗口(单调队列)经典模板
给定一个大小为n≤106n≤106的数组. 有一个大小为k的滑动窗口,它从数组的最左边移动到最右边. 您只能在窗口中看到k个数字. 每次滑动窗口向右移动一个位置. 以下是一个例子: 该数组为[1 3 ...
- 牛客编程巅峰赛S1第11场 - 黄金&钻石 B.新集合 (DFS)
题意:有\([1,n]\)这\(n\)个数,构造集合,集合中不能包含\(u\)和\(v\),问最多能构造多少个集合. 题解:被这题卡了一整场.....以为是推公式,结果答案是暴搜? 首先我们先用一 ...
- Python 闭包及装饰器
闭包是指延伸了作用域的函数. 自由变量(free variable) 指未在本地作用域中绑定的变量 函数装饰器用于在源码中标记函数, 以某种方式增强函数的行为. 装饰器实质,把被装饰的函数替换为新函数 ...