javascript实现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）
2024-07-02 20:37:29
现支持iOS、Android和电脑
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="target-densitydpi=medium-dpi, width=device-width, height=device-height, initial-scale=1" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
body{border:1px solid #066}
.swap_h{ width:1000px; height:77px}
.swap_h div{width:108px; height:75px; word-wrap:break-word; word-break:break-all; float:left; border:1px solid #096; overflow:scroll}
</style>
</head>
<body leftmargin="4" rightmargin="4" onswipe="g('dbg1').innerHTML='swipe b'" onswipeleft="g('dbg2').innerHTML='left b'" onswiperight="g('dbg2').innerHTML='right b'">
swipe swipeleft swiperight
<div id="div1" style="width:300px; overflow:hidden; height:77px; margin:0 auto"><div style="word-break:break-all" class="swap_h" id="swap_1"><div id="swap_11"> -1<?php echo date('H:i:s'); ?></div><div id="swap_12"> -2</div><div> -3</div><div> -4</div><div> -5</div><div> -6</div><div> -7</div><div> -8</div><div> -9</div><div> -0</div><div> -a</div><div> -b</div></div>
</div>
<div id="dbg">dbg</div><script language="javascript">
function l(s){g('dbg').innerHTML = s;
}
function printEvent(evt)
{try{var tmp = '';for(var i in evt){tmp += i+':'var v = evt[i]+'';if(v=='[object HTMLDivElement]'){tmp+=' <b>div</b> - '+evt[i].id+'<br/>';}else if(''+(evt[i])=='[object TouchList]'){tmp+=' <br/> <b>touchlist</b>:<div style="border:1px solid red; margin:1px"> ';for(var x in evt[i]){if(''+(evt[i][x])=='[object Touch]'){tmp+='<br> ----'+x+':'+' <b>Touch</b><br/><div style="border:1px solid blue;margin:1px">';for(var y in evt[i][x]){if(evt[i][x][y]=='[object HTMLDivElement]'){tmp+=' ----'+y+':<b>div</b> - '+evt[i][x][y].id+'<br/>';}else tmp+='<br> ----'+y+':'+evt[i][x][y]+'<br/>';}tmp+='</div>';}elsetmp+='<br> '+x+':'+evt[i][x]+'<br/>';}tmp+='</div>';}else if(typeof(evt[i])=='number'){ tmp+='<font color="green">'+v+'</font><br/>';} else tmp+=''+v+'<br/>';}return tmp;}catch(e){alert(e)}
}
function getxy(e){var a=new Array()var t=e.offsetTop;var l=e.offsetLeft;var w=e.offsetWidth;var h=e.offsetHeight;while(e=e.offsetParent){t+=e.offsetTop;l+=e.offsetLeft;}a[0]=w;a[1]=h;a[2]=l;a[3]=t;return a;
}
function touch(obj,func)
{try{if(arguments.length>2)this.leftRightOnly = arguments[2];elsethis.leftRightOnly = false;if(arguments.length>4){//4，5个参数设置后会帮你设定子元素的宽度，帮助滚动效果var fchild = g(arguments[3]);if(fchild){var fchildCTagName = arguments[4];var childs = fchild.getElementsByTagName(fchildCTagName);var w = 0;for(var i=0;i<childs.length;i++){var xy = getxy(childs[i]);w += xy[0];}fchild.style.width = w+"px";}}this.swipe_function[obj.id] = func;this.id = obj.id;if(!this.id){alert("第一个参数必须有一个id");return;}this.isPc = navigator.userAgent.indexOf('Windows')!=-1||navigator.platform.indexOf('Mac')!=-1;this.startFlag = false;obj.data = this;if(this.isPc){this.bind(obj,'mousedown',function(e){this.data.touchstart(e);});this.bind(obj,'mouseup',function(e){this.data.touchend(e);});this.bind(obj,'mouseout',function(e){this.data.touchend(e);});this.bind(obj,'mousemove',function(e){this.data.touchmove(e);});}else{this.bind(obj,'touchstart',function(e){this.data.touchstart(e);});this.bind(obj,'touchend',function(e){this.data.touchend(e);});this.bind(obj,'touchmove',function(e){this.data.touchmove(e);});}}catch(e){alert("touch: "+e);}
}
touch.prototype.tch_start = {};
touch.prototype.tch_mv = {};
touch.prototype.swipe_function = {};
touch.prototype.bind = function(obj,evt,fun)
{if(typeof obj.attachEvent != 'undefined'){obj.attachEvent('on'+evt,fun);}else{obj.addEventListener(evt,fun,true);}
}
touch.prototype.touchstart=function(evt)
{try{if(this.isPc)var tch = evt;elsevar tch = evt['touches'][0];if(this.isPc)var id = this.id;elsevar id = tch.target.idthis.tch_start[id] = [tch.clientX,tch.clientY,tch.clientX];l("this.tch_start[id]="+this.tch_start[id]+",id="+id)this.startFlag = true;evt.preventDefault();}catch(e){alert('this.tch_start='+this.tch_start+'<br />'+e);}
}
touch.prototype.touchend=function (evt)
{try{if(!this.startFlag) return;if(!this.isPc && (typeof(evt.changedTouches)=='undefined'||evt.changedTouches.length<1)) return;if(this.isPc)var id = this.id;elsevar id = evt.changedTouches[0].target.id;var pid = evt.currentTarget.id;var now = this.tch_mv[id]; var start = this.tch_start[id];l('end= '+start+","+now+",id="+id)var xdiff = now[0]-start[0];var ydiff = now[1]-start[1];var f = this.swipe_function[pid];evt.preventDefault();this.startFlag = false;if(Math.abs(xdiff)>Math.abs(ydiff)){if(xdiff<0){this.swipe(pid,'left',xdiff,f);return;} if(xdiff>0){this.swipe(pid,'right',xdiff,f);return;}}else{if(ydiff<0){this.swipe(pid,'up',ydiff,f);return;} if(ydiff>0){this.swipe(pid,'down',ydiff,f);return;}}}catch(e){alert('touchend error='+e)}
}
touch.prototype.touchmove=function(evt)
{try{if(!this.startFlag) return;if(this.isPc){var id = this.id;var tch = evt;}else{var tch = evt['touches'][0];var id = tch.target.id; }var now = [tch.clientX,tch.clientY];this.tch_mv[id] = now;if(this.leftRightOnly){var start = this.tch_start[id];l('move='+start+","+now+",id="+id)var xdiff = start[2] - now[0];var obj = g(this.id);obj.scrollLeft += xdiff; start[2] = now[0];}evt.preventDefault();}catch(e){console.log('touchmove error='+e);//l(printEvent(evt));}
}
touch.prototype.swipe = function(pid,dir,xydiff,func)
{if(typeof(swiping)=='undefined') swiping = false;if(swiping) return;swiping = true;try{var obj = g(pid);var moveDis = obj.style.width?parseInt(obj.style.width,10):300;if(this.leftRightOnly){var cur_scrollleft = obj.scrollLeft;var moved = cur_scrollleft%moveDis;if(dir=='right')moveDis = moved;else if(dir=='left')moveDis -= moved;else{if(moved>moveDis/2){var factor = 1;moveDis = moveDis - moved;}else{var factor = -1;moveDis = moved;}}//g('dbg').innerHTML = 'dir='+dir+',cur_scrollleft='+cur_scrollleft+',moveDis='+moveDis+'<br/>'+g('dbg').innerHTML;}if(dir=='left')func(pid,moveDis,1);else if(dir=='right')func(pid,moveDis,-1); else{swiping = false;xydiff = Math.abs(xydiff)*2;if(dir=='up')var scrollMoveValue = xydiff;elsevar scrollMoveValue = xydiff*-1;document.body.scrollTop = document.body.scrollTop+scrollMoveValue;if(this.leftRightOnly){func(pid,moveDis,factor);}} }catch(e){alert(e)}
}function g(id)
{return document.getElementById(id);
}
var swiping = false;
var step = 16;
function slowmv(pid,v,v1)
{try{var moved = arguments.length==4?arguments[3]:0;if(moved+step>v)var _step = v-moved;elsevar _step = step;moved+=_step;var obj = g(pid);var display_width = obj.style.width?parseInt(obj.style.width,10):0;var new_left = obj.scrollLeft+_step*v1;if((v1>0&&new_left+display_width>=obj.scrollWidth)||(v1<0&&new_left<=0)) new_left = new_left<=0?0:(obj.scrollWidth-display_width);obj.scrollLeft = new_left;if(moved<v){if(new_left>=obj.scrollWidth-display_width||new_left<=0){swiping = false;return;}setTimeout(function(){slowmv(pid,v,v1,moved);},25);}else swiping = false;}catch(e){alert('slowmv error='+e+',pid='+pid+',v='+v+',v1='+v1);}
}
//div1是最外的框，决定了可以看到的范围；swap_1是里面很宽的内容，每次滑动显示一部分它的内容；最后一个参数是swap_1里面子元素的标签名，如果swap_1里面是图片，就传img
var t = new touch(g('div1'),slowmv,true,'swap_1', 'div');</script>
</body>
</html>我的QQ群：
PHPer&Webgame&移动开发，群号：95303036
转载于:https://www.cnblogs.com/lein317/archive/2012/06/26/5067626.html
javascript实现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）相关推荐
- 阿里 AI「一对多」挑战人类律师；谷歌或将推出自研手机和电脑芯片；JavaScript诞生25周年|极客头条...
整理 | 郑丽媛 头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「 ...
- 打包html5调用手机震动,javascript实现手机震动API代码
现代浏览器里提供的新的API越来越倾向于移动手机应用,而不是传统的桌面应用,比如 javascript地理位置信息API .另外一个只针对手机应用的JavaScript API就是 振动(Vibrat ...
- html js控制页面蒙版,javascript实现蒙版与禁止页面滚动
本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码,供大家参考,具体内容如下 项目需求:页面很长,要求加个蒙版,点击特定位置蒙版消失可以滑动页面,否则蒙版存在页面不可以滑动:要同 ...
- HTML5期末大作业：X米网站设计——小米商城手机(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生dreamweaver网页设计作业成品
HTML5期末大作业:X米网站设计--小米商城手机(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生dreamweaver网页设计作业成品 常见网页设计作业题材有 个人 ...
- HTML5响应式手机模板：【超炫购物模板】——仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板
HTML5响应式手机模板:电商网站设计--仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板 手机网站模板 电商网站手机模板 响应式手机网站 html5手机网站模板 ...
- javascript能实现什么功能,如何开启javascript功能
如何正确学习JavaScript 买一本JavaScript的书籍就可以了,慢慢学,根据三个组成部分来学. 核心(ECMAScript)文档对象模型(DOM)浏览器对象模型(BOM)核心(ECMASc ...
- JavaScript（五）—— Web APIs 简介/JavaScript 必须掌握的 DOM 操作 (丰富案例 + 思维导图）
本篇为 JavaScript 系列笔记第五篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程 系列笔记: JavaScript(一)-- 初识JavaScript / ...
- 手机屏幕常见故障_手机触摸屏常见问题及解决方法
原标题:手机触摸屏常见问题及解决方法 从iPhone开始,手写触摸屏手机就开始成为一种流行.摆脱了键盘的束缚,指尖可以自如地在手机屏幕上灵活跃动,手机菜单在手指的轻拉拖拽下操控自如,再加上配备的手写笔 ...
- 手机屏幕常见故障_【最新推荐】手机触摸屏常见问题及解决方法-范文模板 (3页)...
本文部分内容来自网络整理,本司不为其真实性负责,如有异议或侵权请及时联系,本司将立即删除! == 本文为 word 格式,下载后可方便编辑和修改! == 手机触摸屏常见问题及解决方法 大家使用手机的过 ...
最新文章
- 简单粗暴的多对象目标跟踪神器 – DeepSort
- Why gdb crash if create too many threads ?
- 数据库操作之增删改查CRUD
- 若谷歌实用量子计算机难产，拉里·佩奇会把它砍掉吗？
- javascript实例_网页空降与抖动
- [密码学基础][每个信息安全博士生应该知道的52件事][Bristol52]50.什么是BLS基于对的签名方案？
- 【转】1.C Task.CompletedTask和Task.Result小记
- 13，反转链表《剑指offer》
- Laravel源码解析之QueryBuilder
- 盘古分词工具学习笔记
- 更改计算机睡眠时间注册表,如何通过修改注册表开启/关闭系统休眠？
- 虚拟机上用U盘安装系统
- 第一章---近红外光谱概述2（近红外光谱分析难点及解决思路）
- valgrind内存泄露和线程竞态检测
- 从身份证号里可以解析出出生地，年月日，性别及年龄
- 房贷计算器(包含商业贷款和公积金贷款) 两种思路
- JS复制文本到粘贴板，前端H5移动端点击按钮复制文本到粘贴板。
- 信息安全竞赛解决方案
- ADC0809转换器
- 水星UD6S网卡Linux驱动,水星UD6S驱动|水星UD6S无线网卡驱动下载 v1.0 官方版 - 比克尔下载...