-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathswipe.html
97 lines (82 loc) · 2.24 KB
/
swipe.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Swipe Guesture</title>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/Guesture.js"></script>
<style>
body{
margin: 0;
padding: 0;
font-size: 15px;
font-family: arial;
}
a{text-decoration: none;}
#draw{
border: 2px solid #aaa;
background: #eee;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
}
#footer{
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">JavaScript Swipe Guesture</h1>
<p style="text-align: center;">Drag and swipe the color block in the rect</p>
<div id="draw" style="position: relative; margin: 0 auto; width: 100%;
overflow: hidden;">
<div id="layer" style="border: 1px solid #333;">
<img src="imgs/lupai-1.png" style="position: absolute; top: 30px; left: 200px;" />
<img src="imgs/lupai-2.png" style="position: absolute; top: 120px; left: 80px;" />
<img src="imgs/car.png" style="position: absolute; top: 50px; left: 50px;" />
</div>
</div>
<p id="debug" style="text-align: center;"></p>
<p style="text-align: center;">
<a href="index.html">index.html</a>
|
<a href="swipe.html">swipe.html</a>
|
<a href="mountain.html">mountain.html</a>
</p>
<div id="footer">
Copyright © 2014 <a href="http://www.ideawu.net/">ideawu.net</a>.
<a href="https://github.com/ideawu/ParallaxScroll" target="_blank">Github</a>
</div>
<script type="text/javascript">
$('#draw').height(Math.max(200, $(window).height() - 240));
$('#draw').width($(window).width() * 0.8);
var layer = {x: 0, y: 0};
$('#layer').css({
height: 300,
width: 300,
background: '#f7be4d',
position: 'absolute'
});
var guesture = new Guesture('#draw');
guesture.onswipe = function(e){
// furthur move events are ignored
//e.preventDefault();
}
guesture.onmove = function(e){
layer.x += e.dx;
layer.y += e.dy;
$('#layer').css({
left: layer.x,
top: layer.y
});
var str = e.type + ': ' + parseInt(layer.x) + ', ' + parseInt(layer.y);
$('#debug').html(str);
}
</script>
</body>
</html>