質問編集履歴
2
a
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
### 発生している問題・エラーメッセージ
|
|
12
12
|
|
|
13
13
|
現在実装したものをGithubに上げており、見れる形にしたものが以下のものです。画像の表示をどのコードの部分に記載すればいいかわからず、画面の片側に表示されています。また高さもあっておらず表示がリピートされています。
|
|
14
|
-
[https://k49977.github.io/multiscroll/
|
|
14
|
+
[https://k49977.github.io/multiscroll/#first](https://k49977.github.io/multiscroll/#first)
|
|
15
15
|
|
|
16
16
|
該当のソースコードは以下です。
|
|
17
17
|
```html
|
1
a
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,8 +14,101 @@
|
|
|
14
14
|
[https://k49977.github.io/multiscroll/examples/example.html#first](https://k49977.github.io/multiscroll/examples/example.html#first)
|
|
15
15
|
|
|
16
16
|
該当のソースコードは以下です。
|
|
17
|
+
```html
|
|
18
|
+
<!DOCTYPE html>
|
|
19
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
20
|
+
|
|
21
|
+
<head>
|
|
22
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
23
|
+
<title>multiscroll.js - split multi-scrolling pages plugin</title>
|
|
24
|
+
<meta name="author" content="Alvaro Trigo Lopez" />
|
|
25
|
+
<meta name="description" content="multiscroll plugin by Alvaro Trigo. Create divided multi-scrolling pages with two splited vertical layouts or panels." />
|
|
26
|
+
<meta name="keywords" content="multiscroll,jquery,alvaro,trigo,plugin,divided,splitscreen,screen,panels,layouts,vertical,split,splited" />
|
|
27
|
+
<meta name="Resource-type" content="Document" />
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
<link rel="stylesheet" type="text/css" href="../jquery.multiscroll.css" />
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="examples.css" />
|
|
32
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
|
33
|
+
<script type="text/javascript" src="../vendors/jquery.easings.min.js"></script>
|
|
34
|
+
<script type="text/javascript" src="../jquery.multiscroll.js"></script>
|
|
35
|
+
|
|
36
|
+
<script type="text/javascript">
|
|
37
|
+
$(document).ready(function() {
|
|
38
|
+
$('#myContainer').multiscroll({
|
|
39
|
+
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
|
|
40
|
+
anchors: ['first', 'second', 'third'],
|
|
41
|
+
menu: '#menu',
|
|
42
|
+
navigation: true,
|
|
43
|
+
navigationTooltips: ['One', 'Two', 'Three'],
|
|
44
|
+
loopBottom: true,
|
|
45
|
+
loopTop: true
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
</script>
|
|
49
|
+
</head>
|
|
50
|
+
<body>
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
<ul id="menu">
|
|
54
|
+
<li data-menuanchor="first"><a href="#first">First slide</a></li>
|
|
55
|
+
<li data-menuanchor="second"><a href="#second">Second slide</a></li>
|
|
56
|
+
<li data-menuanchor="third" style="background-image: url('./imgs/multiscroll.png');"><a href="#third">Third slide</a></li>
|
|
57
|
+
</ul>
|
|
58
|
+
|
|
59
|
+
<div id="myContainer">
|
|
60
|
+
|
|
61
|
+
<div class="ms-left">
|
|
62
|
+
|
|
63
|
+
<div class="ms-section" id="left1">
|
|
64
|
+
<div class="ms-tableCell" style="height: 2122px;">
|
|
65
|
+
<div class="graduated"></div>
|
|
66
|
+
<div class="fullscreen">
|
|
67
|
+
<h1>multiScroll.js</h1>
|
|
68
|
+
<h2>Create divided multi-scrolling pages.</h2>
|
|
69
|
+
<div id="download"><a href="https://github.com/alvarotrigo/multiscroll.js/archive/master.zip">Download</a></div>
|
|
70
|
+
<br>
|
|
71
|
+
<img src="imgs/multiscroll.png" alt="multiscroll" height="257" width="265">
|
|
72
|
+
<p id="extensions-text">
|
|
73
|
+
<a href="https://alvarotrigo.com/multiScroll/extensions">multiScroll Extensions</a>
|
|
74
|
+
</p>
|
|
75
|
+
</div>
|
|
76
|
+
</div></div>
|
|
77
|
+
|
|
78
|
+
<!-- <div class="ms-section" id="left1" style="background-image: url('./imgs/multiscroll.png');">
|
|
79
|
+
<h1>Left 1</h1>
|
|
80
|
+
</div> -->
|
|
81
|
+
|
|
82
|
+
<div class="ms-section" id="left2">
|
|
83
|
+
<h1>Left 2 </h1>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="ms-section" id="left3">
|
|
87
|
+
<h1>Left 3</h1>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div class="ms-right">
|
|
92
|
+
<div class="ms-section" id="right1" style="background-image: url('./imgs/tiger.jpeg');">
|
|
93
|
+
<h1>Right 1</h1>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="ms-section" id="right2">
|
|
97
|
+
<h1>Right 2</h1>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div class="ms-section" id="right3">
|
|
101
|
+
<h1>Right 3</h1>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
</body>
|
|
107
|
+
</html>
|
|
108
|
+
```
|
|
17
109
|
[https://github.com/k49977/multiscroll/blob/master/examples/example.html](https://github.com/k49977/multiscroll/blob/master/examples/example.html)
|
|
18
110
|
|
|
111
|
+
|
|
19
112
|
もしわかる方がいればアドバイスください。
|
|
20
113
|
|
|
21
114
|
### 補足情報（FW/ツールのバージョンなど）
|