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 ...
随机推荐
- http的响应码及含义
1xx(临时响应) 100: 请求者应当继续提出请求. 101(切换协议) 请求者已要求服务器切换协议,服务器已确认并准备进行切换. 2xx(成功) 200:正确的请求返回正确的结果 201:表示资源 ...
- .NET并发编程-函数式编程
本系列学习在.NET中的并发并行编程模式,实战技巧 函数式编程 和面向过程编程POP(procedure oriented Programming)面向对象编程OOP(object oriented ...
- vue项目中如何引用tinymce
最近公司在做一个CMS系统的项目,其中富文本编辑框用的很多,目前流行的也很多,包括wangEditor.TinyMCE.百度ueditor.kindeditor.CKEditor等.经过自己的一番翻箱 ...
- 项目Js源码整合
整合一下目前做的项目中JS中用到的相关源码等,留待记录和使用. 一.ajaxgrid源码部分 1.初始化 2.查询 3.删除 4.保存 5.根据id获取值,时间值等 6.详情.跳转链接 : a 标签 ...
- 5.DHCP新建作用域及添加地址保留(Windows2012)
1.新建作用域 右键IPv4 点击新建作用域 点击下一步 命名,下一步 填写子网,下一步 在上一步已经预留了,直接点下一步即可. 设置租用期限,建议为3天,下一步. 下一步,配置DHCP选项 配置默认 ...
- (8)Linux文件目录结构一览表
1.使用 Linux 时,通过命令行输入 ls -l / 可以看到,在 Linux 根目录(/)下包含很多的子目录(称为一级目录),例如 bin.boot.dev 等.同时,各一级目录下还含有很多子目 ...
- HDU 3449 依赖背包
这道题虽然水水的,但是还是成功地给我增加了10多个WA. 最开始拿着题,一看,依赖背包嘛~直接DFS树形DP嗨起来,甚至连内存都没有算一下,3MLE: 然后又仔细看了一下题,没有必要用树形背包来做嘛, ...
- G - Can you answer these queries? & N - 花神游历各国
A lot of battleships of evil are arranged in a line before the battle. Our commander decides to us ...
- Gym 100803G Flipping Parentheses
题目链接:http://codeforces.com/gym/100803/attachments/download/3816/20142015-acmicpc-asia-tokyo-regional ...
- 洛谷-P1434 [SHOI2002]滑雪 (记忆化搜索)
题意:有一个\(R*C\)的矩阵,可以从矩阵中的任意一个数开始,每次都可以向上下左右选一个比当前位置小的数走,求走到\(1\)的最长路径长度. 题解:这题很明显看到就知道是dfs,但是直接爆搜会TLE ...