<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title> Jquery Ipad下如何支持单指滑动Scroll </title>
<script src="./js/jquery-1.6.2.js"/>
<script>
// 定义一个ScrollCommon的类
var ScrollCommon = function() {
// 横向Scroll的单指滑动
this.touchScrollX = function (selector) {
var scrollStartPos = 0;
$(selector).live('touchstart', function(event) {
scrollStartPos = this.scrollLeft + event.originalEvent.touches[0].pageX;
});
$(selector).live('touchmove', function(event) {
if ((this.scrollLeft < this.scrollWidth - this.offsetWidth &&
this.scrollLeft + event.originalEvent.touches[0].pageX < scrollStartPos - 5) ||
(this.scrollLeft != 0 &&
this.scrollLeft + event.originalEvent.touches[0].pageX > scrollStartPos + 5)) {
event.preventDefault();
}
this.scrollLeft = scrollStartPos - event.originalEvent.touches[0].pageX;
});
};
// 纵向Scroll的单指滑动
this.touchScrollY = function (selector) {
var scrollStartPos = 0;
$(selector).live('touchstart', function(event) {
scrollStartPos = this.scrollTop + event.originalEvent.touches[0].pageY;
});
$(selector).live('touchmove', function(event) {
if ((this.scrollTop < this.scrollHeight - this.offsetHeight &&
this.scrollTop + event.originalEvent.touches[0].pageY < scrollStartPos - 5) ||
(this.scrollTop != 0 &&
this.scrollTop + event.originalEvent.touches[0].pageY > scrollStartPos + 5)) {
event.preventDefault();
}
this.scrollTop = scrollStartPos - event.originalEvent.touches[0].pageY;
});
};
};
// 本机能的js事件
$(function(){
var commonJs = new ScrollCommon();
// 注册本机能的横向Scroll的单指滑动事件
commonJs.touchScrollX('#optionScroll');
// 注册本机能的纵向Scroll的单指滑动事件
commonJs.touchScrollY('#optionScroll');
});
</script>
</head>
<body>
<section id="optionScroll" style="overflow:auto;height:300px;width:600px;border:1px red solid;margin:60px auto auto 80px">
<ul>
<script>
for (var i=0; i<50; i++) {
document.write("<li style='white-space:nowrap;'>我是第" + i + "行数据!!!闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫闭月羞花猫</li>");
}
</script>
</ul>
</section>
</body>
</html>
分享到:
相关推荐
这个例子可以实现想收音机的按钮那样旋转的效果。用一个手指控制旋转。
html5触屏手指滑动响应式幻灯片切换代码 html5触屏手指滑动响应式幻灯片切换代码
用在嵌入式QT或者安卓QT,判断手指滑动方向,来实现手指滑动浏览,并显示自定义滑动条,滑动条可以支持上色,包含两个QtableWidget和QtableView示例,都可以用,文章链接:https://www.cnblogs.com/lifexy/p/14111572.html
MFC做的一个触屏模拟工具,鼠标点击模拟触摸屏按下,鼠标按下时候移动,模拟触屏上滑动。功能相对简单,鼠标在触屏位置点击时以小圆圈标识
常用手势识别:滑动(单指双指,切换不跳动),缩放,旋转(360度无死角)
html5 手指滑动
jqurey手机版触屏滑动效果,适配各个浏览器。可以放心使用。
WM系统触摸屏滑动软件PPC解决不能滑动问题
jQuery图片点击放大支持手机触屏滑动图片展示 jQuery图片点击放大支持手机触屏滑动图片展示 jQuery图片点击放大支持手机触屏滑动图片展示
HTML5手机专题页面触屏滑动上下翻页特效
按照脚本中指令的坐标,构造点击事件,发送(写)到触摸屏设备的节点上,通过得到滑动的开始点和结束点的坐标,发送滑动时的报文到触摸屏设备的节点上,系统收到这些报文后转发到应用层,画面即可做出相应的动作响应...
WPF 3D图片触摸屏滑动效果(苹果浏览器效果)
jQuery触屏手机上下滑动刷新代码是一款手机移动端上下滑动刷新加载信息特效。
android 滑动触摸屏幕事件
通过鼠标点击事件控制panel的自动滚动条移动,实现在触摸屏上的手指拖动效果
android 手势操作 滑动效果 触摸屏事件处理
javascript 手指滑动切换图片 幻灯片效果
html5手指滑动刻度尺选择值特效
javascript触屏滑动特效插件,移动端滑动特效,触屏焦点图,触屏Tab切换,触屏多图切换等
unity鼠标或者移动端手指滑动翻页,使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果。