|
|
@@ -3,32 +3,90 @@
|
|
|
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
- <title>fullPage.js A simple Demo</title>
|
|
|
+ <title>Observer - fullPage.js</title>
|
|
|
|
|
|
- <link rel="stylesheet" type="text/css" href="https://www.jucai.gov.cn/themes/default/assets/app/css/fullpage.css" />
|
|
|
+ <link rel="stylesheet" type="text/css" href="/themes/default/assets/app/css/fullpage.css" />
|
|
|
+ <style>
|
|
|
+ /* Hidding sections under 960px width */
|
|
|
+ @media screen and (max-width: 960px) {
|
|
|
+ .hide-on-responsive{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #fp-nav ul li a span,
|
|
|
+ .fp-slidesNav ul li a span{
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .actions{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ top: 40px;
|
|
|
+ left: 50px;
|
|
|
+ }
|
|
|
+ .actions li{
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .actions button {
|
|
|
+ padding: 0.93em 1.87em;
|
|
|
+ background: #35495e;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 0;
|
|
|
+ color: #fff;
|
|
|
+ margin: 7px;
|
|
|
+ font-size: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actions button:hover {
|
|
|
+ background: #fff;
|
|
|
+ color: #35495e;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
|
|
|
+
|
|
|
<div id="fullpage">
|
|
|
- <div class="section active" id="section0"><h1>fullPage.js</h1></div>
|
|
|
- <div class="section" id="section1">
|
|
|
- <div class="slide "><h1>Simple Demo</h1></div>
|
|
|
- <div class="slide active"><h1>Only text</h1></div>
|
|
|
- <div class="slide"><h1>And text</h1></div>
|
|
|
- <div class="slide"><h1>And more text</h1></div>
|
|
|
+ <div class="section">
|
|
|
+ <img src="/themes/default/assets/app/images/fullpage/calculator/02.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <img src="/themes/default/assets/app/images/fullpage/calculator/03.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <img src="/themes/default/assets/app/images/fullpage/calculator/04.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <img src="/themes/default/assets/app/images/fullpage/calculator/05.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <img src="/themes/default/assets/app/images/fullpage/calculator/06.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <img src="/themes/default/assets/app/images/fullpage/calculator/07.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <img src="/themes/default/assets/app/images/fullpage/calculator/08.jpg">
|
|
|
</div>
|
|
|
- <div class="section" id="section2"><h1>No wraps, no extra markup</h1></div>
|
|
|
- <div class="section" id="section3"><h1>Just the simplest demo ever</h1></div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-<script type="text/javascript" src="https://www.jucai.gov.cn/themes/default/assets/app/js/fullpage.min.js"></script>
|
|
|
+<script type="text/javascript" src="/themes/default/assets/app/js/fullpage.min.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
var myFullpage = new fullpage('#fullpage', {
|
|
|
- sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff']
|
|
|
+ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#435b71', 'orange', 'blue', 'purple', 'yellow', '#435b71', 'orange', 'blue', 'purple', 'yellow' ],
|
|
|
+ anchors: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
|
|
|
+ controlArrows: false,
|
|
|
+ navigation: true,
|
|
|
+ slidesNavigation: true
|
|
|
});
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
+
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
sandm