-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslidePager.html
107 lines (100 loc) · 2.55 KB
/
slidePager.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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="slidePager.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="touchwipe.js"></script>
<script src="slidePager.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="pages pages1 active" data-js="1111">
<div class="black-cover"></div>
<div class="pages__content content">
<div class="content__title">
Wellcome
</div>
<div class="content__description">
スワイプもしくは方向キーで移動
</div>
<div class="content__bread-right">About</div>
<div class="content__bread-top">HomePage</div>
<div class="content__bread-bottom">contact</div>
<div class="content__bread-left">Hobby</div>
</div>
</div>
<div class="pages" data-js="2111">
<div class="pages__content">
たねいちです。
</div>
</div>
<div class="pages" data-js="1211">1211</div>
<div class="pages" data-js="1311">1311</div>
<div class="pages" data-js="1121">1121</div>
<div class="pages" data-js="1221">1221</div>
<script>
$(function(){
$(window).on("load resize", function(){
$(".content__bread-right").css({
'top': $(".content__bread-right").height()/2 + $(window).height()/2
})
$(".content__bread-left").css({
'top': $(".content__bread-left").height()/2 + $(window).height()/2
})
});
var canDo = true;
$(window).on("transfinish", function(){
canDo = true;
})
$(window).on("transing", function(){
canDo = false;
})
pager = new SlidePager()
$('html').keyup(function(e){
if(canDo){
switch(e.which){
case 39: // Key[→]
pager.shiftRight();
break;
case 37: // Key[←]
pager.shiftLeft();
break;
case 38: // Key[↑]
pager.shiftUp();
break;
case 40: // Key[↓]
pager.shiftDown()
break;
}
}
});
$("body").touchwipe({
wipeLeft: function() {
if(canDo){
pager.shiftRight();
}
},
wipeRight: function() {
if(canDo){
pager.shiftLeft();
}
},
wipeUp: function() {
if(canDo){
pager.shiftUp();
}
},
wipeDown: function() {
if(canDo){
pager.shiftDown();
}
},
min_move_x: 20,
min_move_y: 20,
preventDefaultEvents: false
});
});
</script>
</body>
</html>