-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
189 lines (145 loc) · 5.39 KB
/
index.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="zh" class="htmlBody">
<head>
<meta charset="UTF-8">
<title>GoodJin5's 360View Web</title>
<link href="./css/style1.css" type="text/css" rel="stylesheet">
<script src="./js/three.min.js"></script>
<script src="./js/5.js"></script>
</head>
<body class="htmlBody">
<div id="contentWidthForJs" class="content"></div>
<div>
<ul id='guide'>
<li><a href="">Home</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li style="float: right;"><div><a href="" id="guideLiAAbout">About</a></div></li>
</ul>
</div>
<h1 class="head">Welcome to my web</h1>
<div id="homPageMainView" class="view"></div>
<div class="textP">
<h2 class="h2">这里是简介</h2>
<p>
<p>一些东西........<br/>emmm,我想这可能是介绍</p>
</p>
</div>
<div class="content" id="fold">
<div class="foldContent" id="foldContentLeft">
1<br/>
<div id="foldViewLeft" class=" foldView, view"></div>
</div>
<div class="foldContent" id="foldContentCentre">
2<br/>
<div id="foldViewCentre" class=" foldView, view"></div>
</div>
<!-- 这里框架需要js -->
<div class="foldContent" id="foldContentRight" >
3<br/>
<div id="foldViewRight" class=" foldView, view">
</div>
</div>
</div>
<div class="textP">
<h2 class="h2">南浦大桥</h2>
<p>31°12′26″N 121°30′04″E / 31.2072°N 121.5011°E</p>
<p style="width: calc(100%/3.5);margin: auto">曾经为世界第三大叠合梁斜拉桥。大桥跨越黄浦江连接黄浦区与浦东新区，是上海市内环线的重要组成部分，也是开发浦东的起步工程之一。 </p>
</div>
<div id="introduce" class="content">
<div id="introduceContent">
<div class="introduceContent" id="introducePhoto">
图,晴天的南浦大桥
<img src="./img/longPicture.jpg" id="introducePhotoImg">
</div>
<div class="introduceContent" id="introduceText">
<br/>
原名南码头黄浦江大桥，位于中国上海市黄浦区董家渡，是上海市第二座、同时也是中心城区第一座跨越黄浦江的大桥。因该桥西端位于南码头（今属黄浦区），故名。南浦大桥架于浦西陆家浜路与浦东南码头之间，
</div>
</div>
<!-- 这里文本需要js -->
</div>
<div class="textP">
<h2 class="h2">分隔符</h2>
<p>一些东西........<br/>emmm,我想这可能是介绍</p>
</div>
<div class="content">
<div class="row">
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<!--
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
<div class="column">
<img src="./img/1.jpg" class="tablePhotoImg">
</div>
-->
</div>
</div>
<!--
<table class="content">
<tr>
<td class="tableFirst"><img src="./img/1.jpg" class="tablePhotoImg"></td>
<td><img src="./img/1.jpg" class="tablePhotoImg"></td>
<td><img src="./img/1.jpg" class="tablePhotoImg"></td>
<td><img src="./img/1.jpg" class="tablePhotoImg"></td>
</tr>
<tr>
<td class="tableFirst"><img src="./img/1.jpg" class="tablePhotoImg"></td>
<td><img src="./img/1.jpg" class="tablePhotoImg"></td>
<td><img src="./img/1.jpg" class="tablePhotoImg"></td>
<td><img src="./img/1.jpg" class="tablePhotoImg"></td>
</tr>
<tr>
<td class="tableFirst"><img src="./img/1.jpg" class="tablePhotoImg"></td>
<td><img src="./img/1.jpg" class="tablePhotoImg"></td>
<td><img src="./img/1.jpg" class="tablePhotoImg"></td>
<td><img src="./img/1.jpg" class="tablePhotoImg"></td>
</tr>
</table>
-->
<div id="afterContent"><br/></div>
<div id="bottom"><br/>
<p>使用引擎:three.js
    </p>
<p>使用360View框架:<a href="https://github.com/NorikDavtian/ThreeJS-360-Panorama">ThreeJS-360-Panorama</a></p>
<p>我的<a href="https://jyzjyzjyz.github.io/threeJS360Test/">Github<b>网站</b>源码</a></p>
<p>update:v1.0.0.2</p>
</div>
</body>
<script>
test(true);
//getViewElement();
</script>
</html>