移动端 触屏滑动条菜单(完善版 转)
移动端 触屏滑动条菜单(完善版)
|
1
|
|
|
1
|
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
<!doctype html>
<html>
<head>
<meta charset=
"utf-8"
>
<meta name=
"viewport"
content=
"width=320,user-scalable=no"
/>
<title>菜单条</title>
</head>
<body>
<style style=
'display:none'
contentEditable>
*{ margin:0; padding:0;}
ul,li{ margin:0; padding:0; list-style:none;}
#outer{ border:1px solid red; width:300px; height:46px; margin:20px auto; text-align:center; vertical-align:middle; line-height:46px; position:relative; overflow:hidden; background:#eee;}
#outer:hover{ border-color:#333; cursor:pointer;}
#inner{ position:absolute; left:0; top:1px; height:44px; line-height:44px; width:300px; background:#666; text-align:left; clear:both; overflow:hidden;}
#inner li{ width:auto; height:44px; float:left; display:inline; padding:0 15px; text-align:center; }
#inner li:hover{ background:#333;}
#inner li a{font-size:14px; color:#fff; display:inline;width:auto; height:44px; line-height:44px; text-decoration:none;}
.translateZ{ -webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.classtest{ background:
#333;}
</style>
<div id=
"outer"
>
<ul id=
"inner"
>
<li><a href=
""
>首页start</a></li>
<li><a href=
""
>美剧1</a></li>
<li><a href=
""
>电影1</a></li>
<li><a href=
""
>购物1</a></li>
<li><a href=
""
>时尚1</a></li>
<li><a href=
""
>新闻1</a></li>
<li><a href=
""
>其余1</a></li>
<li><a href=
""
>热点1</a></li>
<li><a href=
""
>电视1</a></li>
<li><a href=
""
>历史1</a></li>
<li><a href=
""
>首页2</a></li>
<li><a href=
""
>美剧2</a></li>
<li><a href=
""
>电影2</a></li>
<li><a href=
""
>购物2</a></li>
<li><a href=
""
>时尚2</a></li>
<li><a href=
""
>新闻2</a></li>
<li><a href=
""
>其余2</a></li>
<li><a href=
""
>热点2</a></li>
<li><a href=
""
>电视2</a></li>
<li><a href=
""
>结尾end</a></li>
</ul>
</div>
touches：当前屏幕上全部手指的列表
targetTouches：当前dom元素上手指的列表，尽可能使用这个代替touches
changedTouches：涉及当前事件的手指的列表，尽可能使用这个代替touches
<script src=
"../js/jquery-1.9.1.min.js"
></script>
<script>
window.onload=
function
(){
function
getStyle(obj,attr){
return
obj.currentStyle? obj.currentStyle[attr]:getComputedStyle(obj,
false
)[attr];
}
var
support = document.body.classList==undefined ?
false
:
true
;
var
outer=document.getElementById(
"outer"
);
var
inner=document.getElementById(
"inner"
);
var
li=inner.getElementsByTagName(
"li"
);
var
innerWd=0,i=0;
for
(;i<li.length;i++){
innerWd+=li[i].offsetWidth;
}
inner.style.width=innerWd+
'px'
;
var
startX=0;
var
alls=0;
var
moveLeft=0;
var
iSpeedX = 0;
var
prevX = 0;
var
timer =
null
;
var
resetStartX=
true
;
var
maxDistance=parseInt(outer.offsetWidth-innerWd);
//最大滑动距离
inner.addEventListener(
"touchstart"
,start,
false
);
function
start(e){
if
(inner.offsetWidth<outer.offsetWidth)
return
;
//若是内部元素小于外框 不须要滑动
var
e=e||window.event;
e.preventDefault();
var
touchs=e.touches[0],
resetStartX=
true
;;
//startX=prevX=touchs.pageX;
startX=touchs.pageX;
prevX=touchs.pageX;
alls=
this
.offsetLeft;
inner.addEventListener(
"touchmove"
,move,
false
);
inner.addEventListener(
"touchend"
,end,
false
);
}
function
move(e){
var
e=e||window.event;
if
(e.touches.length > 1 || e.scale && e.scale !== 1)
return
;
// 当屏幕有多个touch或者页面被缩放过，就不执行move操做
var
touchs=e.changedTouches[0];
iSpeedX = touchs.pageX - prevX;
//获取出手一瞬间的速度
prevX = touchs.pageX;
//当前的始终覆盖上一个
moveLeft=touchs.pageX-startX;
var
that=
this
;
if
(that.offsetLeft>=0){
if
(resetStartX){
startX=touchs.pageX;
resetStartX=
false
;
}
that.style.left=moveLeft/3+alls+
'px'
;
}
else
if
(that.offsetLeft<=maxDistance){
if
(resetStartX){
startX=touchs.pageX;
resetStartX=
false
;
}
that.style.left=moveLeft/3+alls+
'px'
;
}
else
{
that.style.left=moveLeft+alls+
'px'
;
}
//this.style.webkitTransform='translateZ(0)'; //移动时候 缓存到GPU层
that.classList.add(
'translateZ'
);
//classList 对已经增长的样式 不在判断是否添加 GPU缓存hack
e.preventDefault();
}
function
end(){
var
self=
this
;
clearInterval(timer);
timer=setInterval(
function
(){
if
(Math.abs(iSpeedX)<=1||self.offsetLeft>50||self.offsetLeft<maxDistance-50){
clearInterval(timer);
//if(self.classList.contains('translateZ')){ //滚动中止 结束时候回收GPU 垃圾
// // self.classList.remove('translateZ'); //不知道怎么删除这样样式
// // self.setAttribute("class",'');
// }
if
(self.offsetLeft>=0){
$(inner).animate({left:0},300,
function
(){
self.classList.remove(
'translateZ'
);
//移除PGU hack
});
}
if
(self.offsetLeft<maxDistance){
$(inner).animate({left:maxDistance+
'px'
},300,
function
(){
self.classList.remove(
'translateZ'
);
//移除PGU hack
});
}
}
else
{
iSpeedX *= 0.95;
self.style.left = parseInt(self.offsetLeft + iSpeedX) +
'px'
;
}
},20);
self.removeEventListener(
"touchmove"
,move,
false
);
self.removeEventListener(
"touchend"
,end,
false
);
//self.style.webkitTransform='';
}
}
</script>
</body>
</html>
|
|
1
|
|
优化滑动 setTimeout 相对减小时间计数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
function
end(){
var
self=
this
;
clearTimeout(timer);
timer=setTimeout(
function
(){
if
(Math.abs(iSpeedX)<=1||self.offsetLeft>50||self.offsetLeft<maxDistance-50){
clearTimeout(timer);
//if(self.classList.contains('translateZ')){ //滚动中止 结束时候回收GPU 垃圾
// // self.classList.remove('translateZ'); //不知道怎么删除这样样式
// // self.setAttribute("class",'');
// }
if
(self.offsetLeft>=0){
$(inner).animate({left:0},300,
function
(){
self.classList.remove(
'translateZ'
);
//移除PGU hack
});
}
if
(self.offsetLeft<maxDistance){
$(inner).animate({left:maxDistance+
'px'
},300,
function
(){
self.classList.remove(
'translateZ'
);
//移除PGU hack
});
}
}
else
{
iSpeedX *= 0.95;
self.style.left = parseInt(self.offsetLeft + iSpeedX) +
'px'
;
console.log(
'setTimeoutsss'
);
setTimeout(arguments.callee,16)
}
},16);
self.removeEventListener(
"touchmove"
,move,
false
);
self.removeEventListener(
"touchend"
,end,
false
);
//self.style.webkitTransform='';
}
|
优化滑动 requestAnimationFrame 大幅减小时间计数
function end(){
var self=this,
stopFlag=null;
function sliderMove(){
if(Math.abs(iSpeedX)<=1||self.offsetLeft>50||self.offsetLeft<maxDistance-50){
if(self.offsetLeft>=0){
$(inner).animate({left:0},300,function(){
self.classList.remove('translateZ'); //移除PGU hack
});
}
if(self.offsetLeft<maxDistance){
$(inner).animate({left:maxDistance+'px'},300,function(){
self.classList.remove('translateZ'); //移除PGU hack
});
}
window.cancelAnimationFrame(stopFlag);//能够取消该次动画
stopFlag=null;
sliderMove=null; //清空对象
console.log('requestAnimationFramessss'+sliderMove);
}else{
iSpeedX *= 0.95;
self.style.left = parseInt(self.offsetLeft + iSpeedX) + 'px';
console.log('滑动时候requestAnimationFrame次数');
stopFlag=requestAnimationFrame(arguments.callee);
}
}
sliderMove();
self.removeEventListener("touchmove",move,false);
self.removeEventListener("touchend",end,false);
//self.style.webkitTransform='';
}
requestAnimationFrame兼容处理：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
;(
function
() {
var
lastTime = 0;
var
vendors = [
'ms'
,
'moz'
,
'webkit'
,
'o'
];
for
(
var
x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] +
'RequestAnimationFrame'
];
window.cancelAnimationFrame = window[vendors[x] +
'CancelAnimationFrame'
] || window[vendors[x] +
'CancelRequestAnimationFrame'
];
}
if
(!window.requestAnimationFrame) window.requestAnimationFrame =
function
(callback, element) {
var
currTime =
new
Date().getTime();
var
timeToCall = Math.max(0, 16 - (currTime - lastTime));
var
id = window.setTimeout(
function
() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return
id;
};
if
(!window.cancelAnimationFrame) window.cancelAnimationFrame =
function
(id) {
clearTimeout(id);
};
}());
// requestAnimationFrame polyfill by Erik Möller.
// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
// MIT license
if
(!Date.now)
Date.now =
function
() {
return
new
Date().getTime(); };
(
function
() {
'use strict'
;
var
vendors = [
'webkit'
,
'moz'
];
for
(
var
i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
var
vp = vendors[i];
window.requestAnimationFrame = window[vp+
'RequestAnimationFrame'
];
window.cancelAnimationFrame = (window[vp+
'CancelAnimationFrame'
]
|| window[vp+
'CancelRequestAnimationFrame'
]);
}
if
(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)
// iOS6 is buggy
|| !window.requestAnimationFrame || !window.cancelAnimationFrame) {
var
lastTime = 0;
window.requestAnimationFrame =
function
(callback) {
var
now = Date.now();
var
nextTime = Math.max(lastTime + 16, now);
return
setTimeout(
function
() { callback(lastTime = nextTime); },
nextTime - now);
};
window.cancelAnimationFrame = clearTimeout;
}
}());
|
相关文章
- 1. 移动端touch触屏滑动事件、滑动触屏事件监听！
- 2. swiper.js 移动端触摸滑动插件
- 3. js 监听移动端web触屏事件 滑动响应
- 4. Swiper --移动端触摸滑动插件
- 5. 触摸滑动简单版
- 6. JS移动客户端--触屏滑动事件
- 7. Android 淘宝滑动条，淘宝菜单滑动条；
- 8. 滑动菜单
- 9. 移动端整页滑屏示例（上下滑动整屏）
- 10. android触屏移动
- 更多相关文章...
- • jQuery Mobile 表单滑动条 - jQuery Mobile 教程
- • ionic 滑动框 - ionic 教程
- • 算法总结-滑动窗口
- • SpringBoot中properties文件不能自动提示解决方法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通过ViewHelper.setTranslationY实现View移动控制（NineOldAndroids开源项目）
- 3. 【Android】日常记录：BottomNavigationView自定义样式，修改点击后图片
- 4. maya 文件检查 ui和数据分离 （一）
- 5. eclipse 修改项目的jdk版本
- 6. Android InputMethod设置
- 7. Simulink中Bus Selector出现很多? ? ?
- 8. 【Openfire笔记】启动Mac版Openfire时提示“系统偏好设置错误”
- 9. AutoPLP在偏好标签中的生产与应用
- 10. 数据库关闭的四种方式
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 移动端touch触屏滑动事件、滑动触屏事件监听！
- 2. swiper.js 移动端触摸滑动插件
- 3. js 监听移动端web触屏事件 滑动响应
- 4. Swiper --移动端触摸滑动插件
- 5. 触摸滑动简单版
- 6. JS移动客户端--触屏滑动事件
- 7. Android 淘宝滑动条，淘宝菜单滑动条；
- 8. 滑动菜单
- 9. 移动端整页滑屏示例（上下滑动整屏）
- 10. android触屏移动