-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
525 lines (509 loc) · 14.5 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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
<meta name="format-detection" content="telphone=no"/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="css/reset.css">
<style type="text/css">
html{
width:100%;
height: 100%;
overflow-x:hidden ;
}
body{
text-align: left;
width: 100%;
overflow: hidden;
background-color: #e9dfc7;
}
.m-read-container{
font-size: 14px;
color: #555;
line-height: 31px;
padding: 15px;
}
.m-read-container h4{
font-size: 20px;
color: #736357;
border-bottom: solid 1px #736357;
letter-spacing: 2px;
margin: 0 0 1em 0;
}
.m-read-container p{
font-family:"黑体";
text-indent: 2em;/*首行缩进*/
margin:0.5em 0;
letter-spacing: 0px;/*字符间距*/
line-height: 24px;
}
.u-tab{
height: 34px;
margin: 10px auto;
line-height: 34px;
border-radius: 8px;
border: 1px solid #858382;
font-size: 12px;
background: #000;
opacity:0.9;
}
.u-tab li{
display:inline-block;
width:49%;
border-right:1px solid #858382;
text-align: center;
color:#fff;
}
.u-tab li:nth-child(2){/*逻辑从一开始*/
border-right:none;
}
.m-button-bar{
width:70%;
max-width: 800px;
padding:5px;
margin:0 auto;
}
.top-nav{
position: fixed;
top:0px;
height:50px;
width: 100%;
z-index: 9999;
background: #000;
}
.icon-back{
position: absolute;
top:14px;
left:10px;
width:23px;
height:23px;
background:url(img/left4.ico);
background-size: contain;
background-repeat: no-repeat;
}
.nav-title{
position: absolute;
top:16px;
left:42px;
color:#d5d5d6;
}
.Button{
position: fixed;
bottom:0px;
height:80px;
width: 100%;
z-index: 9999;
background: #000;
opacity: 0.9;
}
.Button1{
position: absolute;
top:16px;
left:46px;
width:23px;
height:23px;
background:url(img/l14.ico);
background-size: contain;
background-repeat: no-repeat;
}
.Button2{
position: absolute;
top:50px;
left:42px;
color:#d5d5d6;
}
.Button3{
position: absolute;
top:16px;
left:46%;
width:23px;
height:23px;
background:url(img/l7.ico);
background-size: contain;
background-repeat: no-repeat;
}
.Button4{
position: absolute;
top:50px;
left:46%;
color:#d5d5d6;
}
.Button5{
position: absolute;
top:16px;
right:40px;
width:23px;
height:23px;
background:url(img/l16.ico);
background-size: contain;
background-repeat: no-repeat;
}
.Button6{
position: absolute;
top:50px;
right:35px;
color:#d5d5d6;
}
.Button7{
position: absolute;
top:50px;
right:35px;
color:#d5d5d6;
}
.nav-pannel-bk{
position: fixed;
bottom: 80px;
height: 135px;
width:100%;
background: #000;
opacity: 0.9;
z-index: 10000;
}
.nav-pannel{
position: fixed;
bottom: 80px;
height: 135px;
width:100%;
background: none;
color: #fff;
opacity: 0.9;/*设置透明度,0-1*/
z-index: 10001;
}
.child-mod{
padding: 5px 10px;
margin: 15px;
}
.child-mod span{
display: inline-block;
padding-right: 20px;
padding-left: 10px;
}
.font-size-button{
background: none;
border: 1px #8c8c8c solid;
color:#fff;
border-radius: 16px;
padding:5px 40px;
}
.font-size-button:nth-child(2){
margin-right: 10px;
}
.bk-container{
position: relative;
widows: 30px;
height: 30px;
border-radius: 15px;
background: #fff;
display: inline-block;
vertical-align: -8px;
}
.bk-container-current{
position: absolute;
width:32px;
height: 32px;
border-radius: 16px;
border: 1px #ff7800 solid;
background: #FFF;
display: inline-block;
top: -2px;
left: -2px;
}
.bk-container-current1{
position: absolute;
width:32px;
height: 32px;
border-radius: 16px;
border: 1px #e61a1a solid;
background: #669971;
display: inline-block;
top: -2px;
left: 43px;
}
.bk-container-current2{
position: absolute;
width:32px;
height: 32px;
border-radius: 16px;
border: 1px #ee1196 solid;
background: #3c57c4;
display: inline-block;
top: -2px;
left: 87px;
}
.bk-container-current3{
position: absolute;
width:32px;
height: 32px;
border-radius: 16px;
border: 1px #e6e61a solid;
background: #57c43c;
display: inline-block;
top: -2px;
left: 130px;
}
.artical-action-mid{
position: fixed;
z-index: 9998;
width:100%;
height:40%;
top:30%;
}
#timer{
/*position:fixed;
bottom: 0px;*/
z-index: 9992;
font-family: arial;
width:100px;
height:10px;
/*background-color: #3C57C4;*/
font-size: xx-small;
padding-left: 3px;
}
</style>
</head>
<body>
<div id="root" class="container">
<div class="m-artical-action">
<div class="artical-action-mid" id="action_mid"></div>
</div>
<div id="top-nav" class="top-nav"style="display: none;">
<div class="icon-back"></div>
<div class="nav-title">返回书架</div>
</div>
<div id="fition_chapter_title"></div>
<div id="fition_container" class="m-read-container">
<h4>第一章 朝气蓬勃</h4>
<p>前面还有一个序章，大家不要漏看。</p>
<p> 石村，位于苍莽山脉中，四周高峰大壑，茫茫群山巍峨。</p>
<p> 清晨，朝霞灿灿，仿若碎金一般洒落，沐浴在人身上暖洋洋。</p>
<p>一群孩子，从四五岁到十几岁不等，能有数十人，在村前的空地上迎着朝霞，正在哼哈有声的锻炼体魄。一张张稚嫩的小脸满是认真之色，大一些的孩子虎虎生风，小一些的也比划的有模有样。
一个肌体强健如虎豹的中年男子，穿着兽皮衣，皮肤呈古铜色，黑发披散，炯炯有神的眼眸扫过每一个孩子，正在认真指点他们。</p>
<p>“太阳初升，万物初始，生之气最盛，虽不能如传说中那般餐霞食气，但这样迎霞锻体自也有莫大好处，可充盈人体生机。一天之计在于晨，每日早起多用功，强筋壮骨，活血炼筋，将来才能在这苍莽山脉中有活命的本钱。”站在前方、指点一群孩子的中年男子一脸严肃，认真告诫，而后又喝道：“你们明白吗？”
“明白！”一群孩子中气十足，大声回应 山中多史前生物出没，时有遮蔽天空之巨翼横过，在地上投下大片的阴影，亦有荒兽立于峰上，吞月而啸，更少不了各种毒虫伏行，异常可怖。
“明白呀。”一个明显走神、慢了半拍的小家伙奶声奶气的叫道。</p>
<p>这是一个很小的孩子，只有一两岁的样子，刚学会走路没几个月，也在跟着锻炼体魄。显然，他是自己凑过来的，混在了年长的孩子中，分明还不应该出现在这个队伍里。
“哼哼哈嘿！”小家伙口中发声，嫩嫩的小手臂卖力的挥动着，效仿大孩子们的动作，可是他太过幼小，动作歪歪扭扭，且步履蹒跚，摇摇摆摆，再加上嘴角间残留的白色奶渍，引人发笑。
一群大孩子看着他，皆挤眉弄眼，让原本严肃的晨练气氛轻缓了不少。</p>
</div>
<div class="m-button-bar">
<ul class="u-tab">
<li id="prev_button">上一章</li>
<li id="next_button">下一章</li>
</ul>
</div>
<div id="timer"></div>
<div id="Button_Bottom" class="Button"style="display: none;">
<div class="Button1"></div>
<div class="Button2">目录</div>
<div class="Button3" id="show1"></div>
<div class="Button4" id="show2">字体</div>
<div class="Button5"></div>
<div class="Button6">白天</div>
<div class="Button7" style="display: none;">黑夜</div>
</div>
<div class="nav-pannel-bk font-container" style="display: none;"></div>
<div class="nav-pannel font-container" id="font-container" style="display: none;">
<div class="child-mod">
<span>字号</span>
<button id="large-font" class="font-size-button">大</button>
<button id="small-font" class="font-size-button">小</button>
</div>
<div class="child-mod">
<span>背景</span>
<div class="bk-container">
<div class="bk-container-current"></div>
<div class="bk-container-current1"></div>
<div class="bk-container-current2"></div>
<div class="bk-container-current3"></div>
</div>
</div>
</div>
</div>
<script src="lib/zepto.min.js"></script>
<!-- <script>
window.jQuery=$;
</script>-->
<script src="js/jquery.base64.js"></script>
<script src="js/jquery.json.js"></script>
<script type="text/javascript">
var Util=(function(){
var prefix="html5_read_";
var StorageGetter=function(key){
return localStorage.getItem(prefix+key);
}
var StoregeSetter=function(key,value){
return localStorage.setItem(prefix+key,value);
}
return{
StorageGetter:StorageGetter,
StoregeSetter:StoregeSetter
}
})();
var Dom=
{
top_nav:$('#top-nav'),
buttom_nav:$('#Button_Bottom'),
}
var Win=$(window);
var Doc=$(document);
var initFontSize=Util.StorageGetter('font-size');
initFontSize=parseInt(initFontSize);
if(!initFontSize)
{
initFontSize=14;
}
$('#fition_container').css('font-size',initFontSize);
var bk_color=Util.StorageGetter('color');
if(!bk_color){
bk_color='#e9dfc7';
}
$('body').css('background-color',bk_color);
if(bk_color=='#000')
{
$('.Button6').hide();
$('.Button7').show();
}else
{
$('.Button7').hide();
$('.Button6').show();
}
function EventHanlder(){
//交互的事件绑定
Doc.ready(function(){
$('#action_mid').click(function()
{
if(Dom.top_nav.css('display')=='none')
{
Dom.top_nav.show();
Dom.buttom_nav.show();
}
else
{
Dom.top_nav.hide();
Dom.buttom_nav.hide();
$('.font-container').hide();
}
});
$('#show2').click(function()
{ if($('.font-container').css("display")=="none")
{
$('.font-container').show();
}
else
{
$('.font-container').hide();
}
});
$('#large-font').click(function()
{
if(initFontSize>20){
return;
}
initFontSize +=1;
$('#fition_container').css('font-size',initFontSize);
Util.StoregeSetter('font-size',initFontSize);
});
$('#small-font').click(function()
{
if(initFontSize<10){
return;
}
initFontSize -=1;
$('#fition_container').css('font-size',initFontSize);
Util.StoregeSetter('font-size',initFontSize);
});
$('.bk-container-current').click(function(){
bk_color='#FFF'
$('body').css('background-color',bk_color);
Util.StoregeSetter('color',bk_color);
$('.Button7').hide();
$('.Button6').show();
});
$('.bk-container-current1').click(function(){
bk_color='#669971'
$('body').css('background-color',bk_color);
Util.StoregeSetter('color',bk_color);
$('.Button7').hide();
$('.Button6').show();
});
$('.bk-container-current2').click(function(){
bk_color='#3c57c4'
$('body').css('background-color',bk_color);
Util.StoregeSetter('color',bk_color);
$('.Button7').hide();
$('.Button6').show();
});
$('.bk-container-current3').click(function(){
bk_color='#57c43c'
$('body').css('background-color',bk_color);
Util.StoregeSetter('color',bk_color);
$('.Button7').hide();
$('.Button6').show();
});
//#669971 #3c57c4 #57c43c
$('.Button6').click(function()
{
//触发白天夜晚切换事件
bk_color='#000';
$('body').css('background-color',bk_color);
Util.StoregeSetter('color',bk_color);
$('.Button6').hide();
$('.Button7').show();
});
$('.Button7').click(function()
{
//触发白天夜晚切换事件
bk_color='#e9dfc7';
$('body').css('background-color',bk_color);
Util.StoregeSetter('color',bk_color);
$('.Button7').hide();
$('.Button6').show();
});
Win.scroll(function()
{
Dom.top_nav.hide();
Dom.buttom_nav.hide();
$('.font-container').hide();
});
});
}
function showTimer(){
function showTime()
{
var str=""
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth()+1;
month = ((month < 10)?"0":"") + month;
var day=now.getDate();
day = ((day < 10)?"0":"") + day;
var hour=now.getHours();
hour = ((hour < 10)?"0":"") + hour;
var mint=now.getMinutes();
mint = ((mint < 10)?"0":"") + mint;
var second=now.getSeconds();
second = ((second<10)?"0":"") + second;
str=hour+":"+mint+":"+second;
return document.getElementById('timer').innerHTML=str;
}
setInterval(showTime,500);
}
function main()
{
EventHanlder();
showTimer();
}
function ReadModel(){
//实现和阅读器相关的数据交互的方法
var getFunctionInfo=function(){
$.get('/data/chapter.json',function(){},"json");
}
}
function ReaderBaseFrame(){
//渲染基本UI结构
}
main();
</script>
</body>
</html>