-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy pathbaidu.html
114 lines (103 loc) · 3.03 KB
/
baidu.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="node_modules/touchjs/touch.min.js"></script>
<script>
//1.tap
//2.swipe
//3. drag
//4. hold
//5. doubletap
//6. rotate
//事件对象
// direction 方向
// x y 滑动的距离
window.onload=function(){
var box=document.getElementsByClassName("box")[0];
var list=document.getElementsByClassName("list");
var leftInit;
var num=0;
touch.on(".box","dragstart",function(){
box.style.transition="none";
leftInit=parseInt(box.style.marginLeft)?parseInt(box.style.marginLeft):0;
})
touch.on(".box","drag",function(e){
box.style.marginLeft= leftInit+e.x+"px";
})
touch.on(".box","dragend",function(e){
if(e.direction=="left"){
if(Math.abs(e.x)>100) {
num++;
if (num == list.length - 1) {
num = list.length - 1;
}
box.style.transition = "margin 1s ease";
box.style.marginLeft = -num * 800 + "px";
}else{
box.style.transition = "margin 1s ease";
box.style.marginLeft = -num * 800 + "px";
}
}else if(e.direction=="right"){
if(Math.abs(e.x)>100) {
num--;
if (num ==-1) {
num = 0;
}
box.style.transition = "margin 1s ease";
box.style.marginLeft = -num * 800 + "px";
}else{
box.style.transition = "margin 1s ease";
box.style.marginLeft = -num * 800 + "px";
}
}
})
}
</script>
<style>
.win{
width:800px;height:300px;
margin:0 auto;
overflow: hidden;
position: relative;
}
.box{
width:500%;height:100%;
}
.list{
width:20%;height:100%;
float: left;
font-size:30px;
line-height: 300px;
text-align: center;
}
.list:nth-child(1){
background:red;
}
.list:nth-child(2){
background:pink;
}
.list:nth-child(3){
background:green;
}
.list:nth-child(4){
background:blue;
}
.list:nth-child(5){
background:orange;
}
</style>
</head>
<body>
<div class="win">
<div class="box">
<div class="list">1</div>
<div class="list">2</div>
<div class="list">3</div>
<div class="list">4</div>
<div class="list">5</div>
</div>
</div>
</body>
</html>