-
Notifications
You must be signed in to change notification settings - Fork 0
/
maker.html
148 lines (123 loc) · 5.76 KB
/
maker.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
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
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8" />
<!-- -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>card maker now!</title>
<!--引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--引入bootstrap CDN.css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<!--引入bootstrap CDN.js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<!--引入css -->
<link rel="stylesheet" href="maker.css" type="text/css">
<!-- -->
<script src="static/jquerypp.custom.js"></script>
<!---引入bookblock.js -->
<script src="static/jquery.bookblock.js"></script>
<!--引入onepage-scroll CDN.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/jquery.onepage-scroll.js"></script>
<!--引入onepage-scroll CDN.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/onepage-scroll.css" type="text/css">
</head>
<body>
<script type="text/javascript">function option-A(num){
document.getElementById("type-1").style.display='block'
}</script>
<div class="main">
<section class="section1">
<div>
<div class="container type-option">
<div class="col-xs-1"></div>
<div class="col-xs-2 type-option-list">
<ul class="btn-group" data-toggle="buttons">
<li>
<label type="button" class="btn-lg btn btn-default" onclick="option-A(1)">
<input type="radio" autocomplete="off" name="type-options" checked id="option1" >
可愛小書
</label>
</li>
<li>
<label type="button" class="btn-lg btn btn-default">
<input type="radio" name="type-options" autocomplete="off" id="option2">
滾動卡片
</label>
</li>
<li>
<label type="button" class="btn-lg btn btn-default">
<input type="radio" name="type-options" autocomplete="off" id="option3">
C
</label>
</li>
<li>
<label type="button" class="btn-lg btn btn-default">
<input type="radio" name="type-options" autocomplete="off" id="option4">
D
</label>
</li>
<li>
<label type="button" class="btn-lg btn btn-default ">
<input type="radio" name="type-options" autocomplete="off" id="option5">
E
</label>
</li>
<li>
<button > Click me</button>
</li>
</ul>
</div>
<div class="col-xs-8">
<div class="type-option-display">
<div id="type-1"></div>
<div id="type-2"></div>
<div id="type-3"></div>
</div>
</div>
</div>
</div>
<div class="next">
<div class="next-button">
</div>
</div>
</section>
<section class="section2">
</section>
<section class="section3">
</section>
</div>
<div class="container navigation">
<div class="col-xs-2 option">
</div>
<div class="col-xs-2 option">
選擇樣式<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="col-xs-2 option">
選擇張數<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="col-xs-2 option">
上傳圖片<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="col-xs-2 option">
添加字體<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
</div>
<script>
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: false, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "vertical" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});</script>
</body>