-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
145 lines (118 loc) · 5.93 KB
/
home.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
<!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="home.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>
<div class="main">
<section class="page1">
<div class="container-fluid">
<div class="row navigation">
<div class="col-xs-2">
</div>
<div class="col-xs-2">
<div class="navb col-xs-8">
<a href="file:///home/ken1277725/google_projects/web_card_maker/home.html">
<b><li>網站特色</li></b>
</a>
</div>
</div>
<div class="col-xs-2 navwords">
<div class="navb col-xs-8">
<a href="file:///home/ken1277725/google_projects/web_card_maker/home.html">
<b><li>立即體驗</li></b>
</a>
</div>
</div>
<div class="col-xs-2">
<div class="navb col-xs-8">
<a href="file:///home/ken1277725/google_projects/web_card_maker/home.html">
<b><li>關於我們</li></b>
</a>
</div>
</div>
</div>
<div class="row page1-content">
<div id="carousel-example-generic" class="carousel slide page1-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/P1000557.JPG" class"img-responsive img-thumbnail imgsize">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/P04.JPG" class"img-responsive img-thumbnail imgsize">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/P04.JPG" class"img-responsive img-thumbnail imgsize">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<section>
<div class="context"></div>
</section>
<section>
</section>
</div>
<div class="">
</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>