博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
android左右滑动实现翻页_'墨羲的墨案阅读器' 插件分享 : 手势翻页脚本...
阅读量:5108 次
发布时间:2019-06-13

本文共 5535 字,大约阅读时间需要 18 分钟。

5c4f2d099ee27fc8a02c6330b2ed467a.png

首先是演示:(视频里我没有反应过来上下反着的)

知乎视频​www.zhihu.com

基本操作为(上下划动小翻页,左右划动大翻页,左右边栏触碰即翻页,同时屏蔽普通的页内划动)

如何导入插件可以看这里:

https://jingyan.baidu.com/article/5d6edee234cabcd8ebdeec06.html​jingyan.baidu.com

原始脚本(不建议直接导入Via或者其他支持用户脚本的浏览器页面,可以导入的版本在下面):

//适配300 DPI下的墨案Inkpad X Via浏览器翻页脚本//此DPI下浏览器分辨率为906x1208//如果DPI不一致请修改下面的变量// version:0.1.0// Date:2020-7-10window.addEventListener('load', function(){
//配置区 var smallScrollGap = 300, //小翻页的间隔(上划下划) bigScrollGap = 1150, //大翻页的间隔(左划右划) edgeAreaSize = 0.05, //侧边检测区域的大小 threshold = 80, //最小的动作触发检测间隔 restraint = 100, // 最大的跨坐标轴位移(比如当前是横向手势,其在滑动中产生的纵向位移) allowedTime = 400, // 一次操作最大的触发时间(ms) upDownState = -1, //1或-1,该选项影响是手指方向滚屏还是逆手指方向滚屏(纵向) leftRightState = 1, //1或-1,该选项影响是翻书方向滚屏还是逆翻书方向滚屏(横向,该选项也会影响左右两侧的触碰区域) debugMode = 0; //调试模式开关,影响调试输出 //配置结束,进入逻辑 //处理滑动逻辑 var el = document.querySelector("html"); if(el){
swipedetect(el, function (swipedir) {
if(debugMode ==1){
console.log("scrool to " + swipedir); } // swipedir = {"none", "left", "right", "up", "down"} if (swipedir == "left") {
window.scrollBy(0, leftRightState * bigScrollGap); } else if (swipedir == "right") {
window.scrollBy(0, -leftRightState * bigScrollGap); } else if (swipedir == "up") {
window.scrollBy(0, upDownState * smallScrollGap); } else if (swipedir == "down") {
window.scrollBy(0, -upDownState * smallScrollGap); } }); } //获取页宽和页高 function getWidth() {
return Math.max( // document.body.scrollWidth, // document.documentElement.scrollWidth, // document.body.offsetWidth, // document.documentElement.offsetWidth, // document.documentElement.clientWidth screen.availWidth ); } function getHeight() {
//页高,下一个版本做边栏上下区域不同功能用得到 return Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight ); } //滑动方向检测 function swipedetect(el, callback) {
var touchsurface = document.querySelector("html"),//找寻HTML节点注入事件 swipedir, startX, startY, distX, distY, elapsedTime, startTime, handleswipe = callback || function (swipedir) {}; touchsurface.addEventListener( "touchstart", function (e) {
var touchobj = e.changedTouches[0]; swipedir = "none"; var dist = 0; startX = touchobj.pageX; startY = touchobj.pageY; //这里采用屏幕坐标进行边界特判 console.log("screen Pos x,y:"+touchobj.screenX+','+touchobj.screenY); // 左右侧单击特判 var PageX_MAX = touchobj.screenX; if(getWidth() - PageX_MAX < edgeAreaSize * getWidth()) {
swipedir = "down"; } else if(PageX_MAX < edgeAreaSize * getWidth()) {
swipedir = "up"; } startTime = new Date().getTime(); // 记录动作开始时间 //e.preventDefault(); }, {
passive: false } ); touchsurface.addEventListener( "touchmove", function (e) {
e.preventDefault(); // 阻止元素滑动 }, {
passive: false } ); touchsurface.addEventListener( "touchend", function (e) {
var touchobj = e.changedTouches[0]; distX = touchobj.pageX - startX; //获取横纵坐标的位移向量 distY = touchobj.pageY - startY; elapsedTime = new Date().getTime() - startTime; // 获得总动作时长 if (elapsedTime <= allowedTime) {
//判断动作是否超时 if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
//计算位移 swipedir = distX < 0 ? "left" : "right"; // 如果 distX 是个负值,那么是移动是自右向左(坐标轴正半轴到负半轴),反之亦然 } else if ( Math.abs(distY) >= threshold && Math.abs(distX) <= restraint ) {
// 纵向检测 swipedir = distY < 0 ? "up" : "down"; // 如果 distY 是个负值,那么是移动是自上向下(坐标轴正半轴到负半轴),已经说过了 } } handleswipe(swipedir); //e.preventDefault(); }, {
passive: false } ); } }, false) //脚本结束

压缩后的脚本(可以导入支持脚本的浏览器)

window.addEventListener("load",function(){
var e,o,a,c,t,s,r,n,d;function i(){
return Math.max(screen.availWidth)}debugMode=0,document.querySelector("html")&&(e=function(e){
1==debugMode&&console.log("scrool to "+e),"left"==e?window.scrollBy(0,1150):"right"==e?window.scrollBy(0,-1150):"up"==e?window.scrollBy(0,-300):"down"==e&&window.scrollBy(0,300)},n=document.querySelector("html"),d=e||function(e){},n.addEventListener("touchstart",function(e){
var n=e.changedTouches[0];o="none";a=n.pageX,c=n.pageY,console.log("screen Pos x,y:"+n.screenX+","+n.screenY);var t=n.screenX;i()-t<.05*i()?o="down":t<.05*i()&&(o="up"),r=(new Date).getTime()},{
passive:!1}),n.addEventListener("touchmove",function(e){
e.preventDefault()},{
passive:!1}),n.addEventListener("touchend",function(e){
var n=e.changedTouches[0];t=n.pageX-a,s=n.pageY-c,(new Date).getTime()-r<=400&&(80<=Math.abs(t)&&Math.abs(s)<=100?o=t<0?"left":"right":80<=Math.abs(s)&&Math.abs(t)<=100&&(o=s<0?"up":"down")),d(o)},{
passive:!1}))},!1);

如果对我提供的脚本效果不满意,可以自行修改配置区块然后生成新的压缩脚本

将修改后的代码粘贴在 https://jscompress.com/ 中,随后单击下方'Compass JavaScript',将压缩后的脚本导入即可。

可能会写一个系列

By: Morxi

转载地址:http://dljdv.baihongyu.com/

你可能感兴趣的文章
[Git] 014 远程仓库篇 第一话
查看>>
canvas实现验证码功能
查看>>
mysql 将null转代为0
查看>>
AJAX——AJAX初步
查看>>
gitlab quickly install
查看>>
HashMap
查看>>
服务器端——tomcat
查看>>
poj 2385 Apple Catching
查看>>
使用VS Code远程开发
查看>>
Good Article Good sentence HDU - 4416 (后缀自动机)
查看>>
连接虚拟机 模拟远程登录
查看>>
PAT 甲级 1025 1025 PAT Ranking
查看>>
蓝桥杯 基础练习 回文数
查看>>
B. Gerald is into Art
查看>>
《DevExpress》记录之TreeList
查看>>
SSH远程登录原理
查看>>
JS字符串转换为JSON的四种方法笔记
查看>>
梦断代码阅读笔记01
查看>>
c# 事件详解
查看>>
Item 5:Be wary of user-defined conversion functions.(More Effective C++)
查看>>