質問編集履歴
2
a
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
現在実装したものをGithubに上げており、見れる形にしたものが以下のものです。画像の表示をどのコードの部分に記載すればいいかわからず、画面の片側に表示されています。また高さもあっておらず表示がリピートされています。
|
|
26
26
|
|
|
27
|
-
[https://k49977.github.io/multiscroll/
|
|
27
|
+
[https://k49977.github.io/multiscroll/#first](https://k49977.github.io/multiscroll/#first)
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
1
a
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -30,10 +30,196 @@
|
|
|
30
30
|
|
|
31
31
|
該当のソースコードは以下です。
|
|
32
32
|
|
|
33
|
+
```html
|
|
34
|
+
|
|
35
|
+
<!DOCTYPE html>
|
|
36
|
+
|
|
37
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
<head>
|
|
42
|
+
|
|
43
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
44
|
+
|
|
45
|
+
<title>multiscroll.js - split multi-scrolling pages plugin</title>
|
|
46
|
+
|
|
47
|
+
<meta name="author" content="Alvaro Trigo Lopez" />
|
|
48
|
+
|
|
49
|
+
<meta name="description" content="multiscroll plugin by Alvaro Trigo. Create divided multi-scrolling pages with two splited vertical layouts or panels." />
|
|
50
|
+
|
|
51
|
+
<meta name="keywords" content="multiscroll,jquery,alvaro,trigo,plugin,divided,splitscreen,screen,panels,layouts,vertical,split,splited" />
|
|
52
|
+
|
|
53
|
+
<meta name="Resource-type" content="Document" />
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
<link rel="stylesheet" type="text/css" href="../jquery.multiscroll.css" />
|
|
60
|
+
|
|
61
|
+
<link rel="stylesheet" type="text/css" href="examples.css" />
|
|
62
|
+
|
|
63
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
|
64
|
+
|
|
65
|
+
<script type="text/javascript" src="../vendors/jquery.easings.min.js"></script>
|
|
66
|
+
|
|
67
|
+
<script type="text/javascript" src="../jquery.multiscroll.js"></script>
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<script type="text/javascript">
|
|
72
|
+
|
|
73
|
+
$(document).ready(function() {
|
|
74
|
+
|
|
75
|
+
$('#myContainer').multiscroll({
|
|
76
|
+
|
|
77
|
+
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
|
|
78
|
+
|
|
79
|
+
anchors: ['first', 'second', 'third'],
|
|
80
|
+
|
|
81
|
+
menu: '#menu',
|
|
82
|
+
|
|
83
|
+
navigation: true,
|
|
84
|
+
|
|
85
|
+
navigationTooltips: ['One', 'Two', 'Three'],
|
|
86
|
+
|
|
87
|
+
loopBottom: true,
|
|
88
|
+
|
|
89
|
+
loopTop: true
|
|
90
|
+
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
</script>
|
|
96
|
+
|
|
97
|
+
</head>
|
|
98
|
+
|
|
99
|
+
<body>
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
<ul id="menu">
|
|
106
|
+
|
|
107
|
+
<li data-menuanchor="first"><a href="#first">First slide</a></li>
|
|
108
|
+
|
|
109
|
+
<li data-menuanchor="second"><a href="#second">Second slide</a></li>
|
|
110
|
+
|
|
111
|
+
<li data-menuanchor="third" style="background-image: url('./imgs/multiscroll.png');"><a href="#third">Third slide</a></li>
|
|
112
|
+
|
|
113
|
+
</ul>
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
<div id="myContainer">
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
<div class="ms-left">
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
<div class="ms-section" id="left1">
|
|
126
|
+
|
|
127
|
+
<div class="ms-tableCell" style="height: 2122px;">
|
|
128
|
+
|
|
129
|
+
<div class="graduated"></div>
|
|
130
|
+
|
|
131
|
+
<div class="fullscreen">
|
|
132
|
+
|
|
133
|
+
<h1>multiScroll.js</h1>
|
|
134
|
+
|
|
135
|
+
<h2>Create divided multi-scrolling pages.</h2>
|
|
136
|
+
|
|
137
|
+
<div id="download"><a href="https://github.com/alvarotrigo/multiscroll.js/archive/master.zip">Download</a></div>
|
|
138
|
+
|
|
139
|
+
<br>
|
|
140
|
+
|
|
141
|
+
<img src="imgs/multiscroll.png" alt="multiscroll" height="257" width="265">
|
|
142
|
+
|
|
143
|
+
<p id="extensions-text">
|
|
144
|
+
|
|
145
|
+
<a href="https://alvarotrigo.com/multiScroll/extensions">multiScroll Extensions</a>
|
|
146
|
+
|
|
147
|
+
</p>
|
|
148
|
+
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
</div></div>
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
<!-- <div class="ms-section" id="left1" style="background-image: url('./imgs/multiscroll.png');">
|
|
156
|
+
|
|
157
|
+
<h1>Left 1</h1>
|
|
158
|
+
|
|
159
|
+
</div> -->
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
<div class="ms-section" id="left2">
|
|
164
|
+
|
|
165
|
+
<h1>Left 2 </h1>
|
|
166
|
+
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
<div class="ms-section" id="left3">
|
|
172
|
+
|
|
173
|
+
<h1>Left 3</h1>
|
|
174
|
+
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
<div class="ms-right">
|
|
182
|
+
|
|
183
|
+
<div class="ms-section" id="right1" style="background-image: url('./imgs/tiger.jpeg');">
|
|
184
|
+
|
|
185
|
+
<h1>Right 1</h1>
|
|
186
|
+
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
<div class="ms-section" id="right2">
|
|
192
|
+
|
|
193
|
+
<h1>Right 2</h1>
|
|
194
|
+
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
<div class="ms-section" id="right3">
|
|
200
|
+
|
|
201
|
+
<h1>Right 3</h1>
|
|
202
|
+
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
</body>
|
|
212
|
+
|
|
213
|
+
</html>
|
|
214
|
+
|
|
215
|
+
```
|
|
216
|
+
|
|
33
217
|
[https://github.com/k49977/multiscroll/blob/master/examples/example.html](https://github.com/k49977/multiscroll/blob/master/examples/example.html)
|
|
34
218
|
|
|
35
219
|
|
|
36
220
|
|
|
221
|
+
|
|
222
|
+
|
|
37
223
|
もしわかる方がいればアドバイスください。
|
|
38
224
|
|
|
39
225
|
|