1.index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<!--viewport表示可视区域-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/reset.css">
<style type="text/css">
html {
width: 100%;
height: 100%;
/* overflow: hidden; */
}
body {
text-align: left;
width: 100%;
/* overflow: hidden; */
background-color: #e8dfc7;
}
.m_read_content {
font-size: 14px;
color: #555;
line-height: 31px;
padding: 15px;
}
.m_read_content h4 {
font-size: 20px;
color: #736357;
border-bottom: solid 1px #736357;
letter-spacing: 2px;
margin: 0 0 1em 0;
}
.m_read_content p {
/* 首行缩进两个字符 */
text-indent: 2em;
margin: 0.5em 0;
/* letter-spacing 属性增加或减少字符间的空白（字符间距）。 */
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;
}
/* 去掉后面按钮的边框 css的逻辑一般是从1开始的不是从0开始的*/
.u-tab li:nth-child(2) {
border-right: none;
}
.m_button_bar {
widows: 70%;
max-width: 300px;
padding: 5px;
margin: 0 auto;
}
.top-nav {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
z-index: 9999;
background: #000;
}
/* 使用base64设置图标 */
.icon-back {
position: absolute;
top: 14px;
left: 10px;
width: 23px;
height: 23px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGMkEyQkQxMjdBNDExRTU4NjA2QTJDMjFDQ0I0ODhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGMkEyQkQyMjdBNDExRTU4NjA2QTJDMjFDQ0I0ODhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkYyQTJCQ0YyN0E0MTFFNTg2MDZBMkMyMUNDQjQ4OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkYyQTJCRDAyN0E0MTFFNTg2MDZBMkMyMUNDQjQ4OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Ia560AAAHWklEQVR42uyd7W9U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);
background-size: contain;
}
.nav-title {
position: absolute;
top: 16px;
left: 42px;
color: #d5d5d6;
}
.bottom-nav {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
background: #000;
opacity: 0.9;
}
.nav-pannel-bk {
position: fixed;
bottom: 70px;
height: 135px;
width: 100%;
background: #000;
opacity: 0.9;
z-index: 10000;
}
.nav-pannel {
position: fixed;
bottom: 70px;
height: 135px;
widows: 100%;
background: none;
color: #fff;
z-index: 10001;
}
.child-mod {
padding: 5px 10px;
margin: 15px;
}
.child-mod span {
display: inline-block;
padding-right: 20px;
padding-left: 10px;
}
.child-mod button {
border-radius: 16px;
background: none;
border: 1px #c8c8c8 solid;
padding: 5px 40px;
color: #fff;
}
.child-mod button:nth-child(2) {
margin-right: 10px;
}
.bk-container {
position: relative;
width: 30px;
height: 30px;
border-radius: 15px;
background: #ffffff;
display: inline-block;
vertical-align: -14px;
margin-left: 10px;
}
.bk-container-current {
position: absolute;
width: 32px;
height: 32px;
border-radius: 16px;
border: 1px #ff7800 solid;
display: inline-block;
top: -2px;
left: -2px;
}
.child-mod div:nth-child(3) {
background: #EECC9C;
}
.child-mod div:nth-child(4) {
background: #ADD678;
}
.child-mod div:nth-child(5) {
background: #666;
}
.bottom-contents {
position: relative;
width: 26px;
margin: 0 auto;
}
.bottom_content {
position: absolute;
top: 3px;
left: 2px;
width: 18px;
height: 13px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAoCAYAAABerrI1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFN0E3M0IwMjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFN0E3M0IxMjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0M1ODVCRkYyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0M1ODVDMDAyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5uTX6PAAAA0UlEQVR42uyXsQrCMBRFX4p0V39Pv8FJcekHFJe6d+v3NY6CDvUFooQ0AcEllnPhlgz3QU6bBq6ZnvdaRC7qndqoB/VR/ZC5wuxGytLtvXejUJ0uDlGgVZ8Tg6lsaWod1Jh461a9TQyMBX6hWLaSBary5zBWn8kPf8DUr/Rx8hfEPth4kxkIs+tCL4rG/VOLPH5AAQUUUEABBRRQv0O54nf1tcL6dZ3Jh9mpMH/2TkmkJFISKYmURKCAAgoooIACCihKIiWRkkhJpCR+XxJfAgwA/ROhOlYvoWQAAAAASUVORK5CYII=);
background-size: contain;
}
.bottom_font {
position: absolute;
top: 3px;
left: 2px;
width: 16px;
height: 11px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAuCAYAAACViW+zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBCRTkzQUQ3Mjc4NzExRTU5RkYxQjg1Rjk2QkEyNzBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBCRTkzQUQ4Mjc4NzExRTU5RkYxQjg1Rjk2QkEyNzBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0U3QTczQkEyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEJFOTNBRDYyNzg3MTFFNTlGRjFCODVGOTZCQTI3MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6/hjRDAAAFqklEQVR42uRaaWwVVRi9fTbYqoBoEGIVrDsBA6JRAY0VSkQUl7pQI8YQGjTRaNCgBtdoApho3aoRRJaIC25/VBTBCiqCuKX+QDFqFANRsRCtsRWr9XzxNBnu++6bO/fNe9i+k5y0c2fmzrwz3/22mbKuv9pNChgCLgLHgBvABnCr6Qkor1CHy1ISZjVYG9leC55V6sLsB/4ucynj7T1VmEwKU09VRBHUmx6MNIS5JuF4SQhzIniKY5+MjypVYa4OtKb/PfJxvn3B7eABOY4Rp3wo2FZKzndajCiG+68otaWkLaP23rKcQoWRDHekMj5DGZPjTisVYWYqY+vB5/g3qZPuFcIMYFJn4wnrr50EDujtwlwFVlpjreBL/P9lbkdRyfMKBcmn7gRfAbeAO8G/wS7yT3Ab+AHYBF4I7ptmuJbUfzN4vDXeCN4U2X4AvNE65gtwOG80rYc6ndcdFnD+DnAe+ChCdme+wpzJyjmKLgr1VWTsOAph11A14LoURBkKrgBPTWGu98CLIE5rPktJC73NliiG5vxOgUK3WN3GlEQRnAG+Zjo7+oQKMxCsU8YXOI7XnHAd5wnFQeAb4GBl37fgXeDp4CGS09Jiy+hPxMoud0RNSSduDV1Kt4DzrbEfecHdyvHyBKSLN8galxu4L1CYp5lxRyGO9WbwcbDT00/OtYVg2VKFJdWWxGIyjtxliUMUw/HFjhwoJBqOVMoLuca54COeonT7xDmMUHbtV5d0KU0Ej7TG/gEXxpy3kMdFIfPUBghzneLMJUS/HTCXiPOYMl6bVBgtc30T/C7mPNm/KgUnvA94iTX2Cy0lFO87rNJbmCpwiqdz9XXCUzivLyqZK21g4tadSObTU96q5FSHJxFmBj18FD8wOvhgJY/fowviKDhz9XXuBccy4kg/eWkKofo3a/tAX2HkBzQo44sSODs57illvEER3Ac7mdxtTEGY/UNrpXOi5hXzQ3NBE1LmnbyXasSTafHlocJoTvJVFmRJsI3n7a12xCD6tfnM0j8CJ4UWkUeA3yjinQ2+FXBzkxS/JKH8KI/o5oP+4LHgMWA177+a20O8ZymvKDMxa9yViK1Kue0xkwlXyLmy1M/jw6pO08RcFiPp/PeOmiRt5CorcvWEbgePDrzmbpYld7gsxiXMpeALRXSGl4Evei6XpWw0JcEf7CN9Bn4Ivs4H0pVUmDXghCIK0+xxvT70UeMd+yXx+5RhfDOrbXH68u5rV47SwFsYcWBfFrDJVKP0arRmlw2tKyj4GnwYfJY5TtKaSRUm4wihtigi1LspWcc6zme3AnKFbnGs1yo/ai4bV00BogyM8+xRVBi9ab3ApNer7XI0t7Qmezemm+zm9f3gbQmddhQnJBFGKtiDrTFZa8tS9inLlAJQrnux4/gJSu10T573MD6JMFqmuyKH8wrFLkfUc7Ujhlvbn1Cc4DTF6O/GVGFGgOMczaZCQFtO4xQTzzBM21acD+rjcqBMzNNqYQ+kEJB5P/eon6RssD8jGWb0z9t8cBj4oE9aLZDPNaZ5PtU0oTWxtM9LWqxtyZTPD7ievO9abbIb9JHeQUcmKsxUxVxlDS8vsDDLFV/R32R/2LhSOfdJ4/8VhfRdZoEfmz3fomoRbXBUGG0ZPWMK/yVUGxOzuOW0mGm9nYes531eQCvqXl7lrNrr2QuSNmajZYm/gjco1x7RnfkOdZT9o1lbFBqjGWW0pC56X9czw42DtCv7xvig7VyKP5vsL9gfQvY7Syymw2S/4thUJFEM65tNisO1I4+8EZjnkWj2ixFFLHQUH4b0ordY+6+En+knwvzElDoaCmeb4mK2JUQT78vGHPZeWhLOL3M/D55k/ntptyOy724l0WyMFpE1jO3NrEyLDVk6E1lIrvU4fgxFGkv/UsWSQnxHK5dhC/3QGqe/dHy1+a8AAwCKR08FSRIHxQAAAABJRU5ErkJggg==);
background-size: contain;
}
.bottom_night {
position: absolute;
top: 3px;
left: 2px;
width: 15px;
height: 13px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA5CAYAAACMGIOFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNFN0E3M0I0Mjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNFN0E3M0I1Mjc4NDExRTU5RkYxQjg1Rjk2QkEyNzBEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0U3QTczQjIyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0U3QTczQjMyNzg0MTFFNTlGRjFCODVGOTZCQTI3MEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6o6V5PAAADu0lEQVR42uyaTUgVURTHm/cigiS1LEitoHoqbgtcZAStngtDoYxa9rFsYYuWfUBhuSjCneiylkH2oavoEZlC4aYsM9toakWLnpsWyfQfOMJrOvdjZs6bedQc+OF7d9499/y9M/fj3HFc110Xo3WAYfp8BozG0agTs8hFsIM+L4H6f1GkvzEnjkYz6/4DS0WmIlORSlsq+bxcKSI3gkHwBlwSGA3PkrjPNE+GnhXAZYprkOLUjOmYQjT0un/aMHAMdcqNQ3GUWq+ujqknt/i+nwZDcc1vih4cojh0cQbqyQaw4P5tSfQo14OezYNGXV0b5zly5Le+mEX2KQTmTHVtl3U58BQ0lpQtgJ2Gei2gE7SDVrANVIMf4Bt4B56Dh+C9wdc80/4RMGteTNr/J/09+lhzW3WBCTeYTVA91WPwKGgPBrldS9kFBkA/qGOuN4FnbjTz6jczvuuoXa/93UHilnxmjoMVV8ZWyJ9IbFICz4FVV9ZWyW9FiDwGfmmCnQIXQBuoBxvobxuVT2nqen57khbpPYNFRYBzoNtiPnXod3MKP0VqJxGRjmaQGQXVAf1VUz3VYOQkIbJLEdADkA3pM0v1OetKQuQ4E8gHUBXxEfDqzzC+x+MW2aL4b+eFRuu8wn9LGH9hN82dTNlrMCa02xgjf347GmdmoJ0puyu8rbrHlB2MU2QrUzYuLLJg2a6VyA7KbLsMi3Tdb9sVuwRJ+2TZrjF+b+4pTd2rkk/1hky4Z+vBapkz7lzW3Ri/ze3KpTqKTNlmYYG1TNlKmJRJpiSDxpkqq/aVKdsrLHIPU/ZFkwFUxu/dYk8M3c3ZNNjnKzsEXgmKPKxo12/G+MOOri+YslPCPXnSst2yTSEjTNkBkBcSmCd/Nu1aDF/hl15cDmdGYO26SXrtGuUs5AZT1kQrn2xIn1la6TQx1/rDT0TR9pMFxUL6fogeraJ6nBWS2k+uZQZUyauPtOO38dNNv1cltZqTzvH0WOZ49oMaqlND321yPCfSbF2ad5UXufaMFiIKLER9BqOK9Ea4m2CZEk61mrOQyYDiJjUpzFpqb5nad8olkjsfvG6RC7oIRsBsSY62SN9H6Lopd3MtyvmorcCM4gD0dkxnk7eiHARHEWg84RWkUXPinZEQeSXsCa8wOYXQqxIi31aAQN3R/rTEAv1lqCNs3taSTqoEmclmqf2FIFlCm3cGvBeBzoOt4I7vraqgJvW+awPF9B0MgJ9RRZYz+5a+75qKTEWmIstuFfm+q7RJve8ayH4LMACaxEJEaXs23AAAAABJRU5ErkJggg==);
background-size: contain;
}
.bottom-nav .item {
display: inline-block;
width: 32%;
color: #fff;
text-align: center;
margin: 0 auto;
}
.icon-text {
position: absolute;
top: 25px;
font-size: 10px;
}
.artical-action-mid {
position: fixed;
z-index: 10003;
width: 100%;
height: 40%;
top: 30%;
}
}
</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 id="icon-back" class="icon-back"></div>
<div id="nav-title" class="nav-title">返回小五书架</div>
</div>
<div id="fiction_chapter_title"></div>
<div id="fiction_container" class="m_read_content">
<h4>《平凡的世界》</h4>
<p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。</p>
<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>
<div class="bottom-nav" id="bottom-nav" style="display: none;">
<div class="item menu-button">
<div id="bottom-contents" class="bottom-contents">
<div id="bottom_content" class="bottom_content"></div>
<div class="icon-text">目录</div>
</div>
</div>
<div class="item">
<div id="bottom-contents" class="bottom-contents">
<div id="bottom_font" class="bottom_font"></div>
<div class="icon-text">字体</div>
</div>
</div>
<div class="item ">
<div id="bottom-contents" class="bottom-contents">
<div id="bottom_night" class="bottom_night"></div>
<div class="icon-text">夜间</div>
</div>
</div>
</div>
<div id="nav-pannel-bk" class="nav-pannel-bk" style="display: none;"></div>
<div class="nav-pannel" 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" id="bk_container_write">
<div class="bk-container-current"></div>
</div>
<div class="bk-container" id="bk_container_grey">
<div class="bk-container-current"></div>
</div>
<div class="bk-container" id="bk_container_green">
<div class="bk-container-current"></div>
</div>
<div class="bk-container" id="bk_container_black">
<div class="bk-container-current"></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.jsonp.js"></script>
<script>
/*存储方法的封装*/
(function() {
var Util = (function() {
var prefix = 'html5_readder_';
var StorageGetter = function(key) {
return localStorage.getItem(prefix + key);
}
var StorageSetter = function(key, val) {
return localStorage.setItem(prefix + key, val);
}
var getBSONP = function(url, callback) {
return $.jsonp({
url: url,
cache: true,
callback: 'duokan_fiction_chapter',
success: function(result) {
var data = $.base64.decode(result);
var json = decodeURIComponent(escapt(data));
callback(data);
}
})
}
return {
getBSONP,
getBSONP,
StorageGetter: StorageGetter,
StorageSetter: StorageSetter
}
})();
//分层
var Dom = {
top_nav: $('#top-nav'),
bottom_nav: $('#bottom-nav'),
font_container: $('#font-container'),
nav_pannel_bk: $('#nav-pannel-bk'),
bk_container_write: $('#bk_container_write'),
bk_container_grey: $('#bk_container_grey'),
bk_container_green: $('#bk_container_green'),
bk_container_black: $('#bk_container_black'),
}
var Win = $(window);
var Doc = $(document);
var initFontSize = 14;
var rootContainer = $('#fiction_container');
var initFontSize = Util.StorageGetter('font_size');
initFontSize = parseInt(initFontSize);
if (!initFontSize) {
initFontSize = 14;
}
rootContainer.css('font-size', initFontSize);
//入口函数
function main() {
//todo 整个项目的入口函数
//意味着对入口函数进行调用
var readerModel=ReaderModel();
readerModel.init();
EventHandler();
}
function ReaderModel() {
//todo 实现和阅读器相关的数据交互的方法
var Charpter_id;
var init=function(){
getFictionInfo(function(){
getCurChapterContent(Charpter_id,function(){
//TODO ...
})
})
}
var getFictionInfo = function(callback) {
$.get('data/chapter.json', function(data) {
//回调函数要做的事情 获得章节信息后的回调
Charpter_id=data.chapters[1].chapter_id;
callback&&callback();
}, 'json');
}
var getCurChapterContent = function(chapter_id) {
//获取当前章节的内容
$.get('data/data' + chapter_id + '.json', function(data) {
//回调函数要做的事情 获得章节信息后的回调
if (data.result == 0) {
var url = data.jsonp;
Util.getBSONP(url, function() {
callback && callback(data);
});
}
}, 'json')
}
return {
init:init
}
}
function ReaderBaseFrame() {
//js初始化基本结构
//渲染基本的UI结构
}
function EventHandler() {
//todo 交互的事件绑定
//touch
//zepto tap zeptojs
//4.0 click 300ms
//click tap
//tap
$("#bottom_font").click(function() {
if (Dom.font_container.css('display') == 'none') {
Dom.font_container.show();
Dom.nav_pannel_bk.show();
} else {
Dom.font_container.hide();
Dom.nav_pannel_bk.hide();
}
});
$('#bottom_night').click(function() {
$("body").css('background-color', '#0F1410');
$("body").css('color', '#5E5A50');
});
$('#bk_container_write').click(function(event) {
$("body").css('background-color', '#FFFFFF');
$("body").css('color', '#0F1410');
});
$('#bk_container_grey').click(function(event) {
$("body").css('background-color', '#EECC9C');
$("body").css('color', '#0F1410');
});
$('#bk_container_green').click(function(event) {
$("body").css('background-color', '#ADD678');
$("body").css('color', '#0F1410');
});
$('#bk_container_black').click(function(event) {
$("body").css('background-color', '#908156');
$("body").css('color', 'red');
});
$('#large-font').click(function() {
if (initFontSize > 20) {
return;
}
initFontSize += 2;
rootContainer.css('font-size', initFontSize);
Util.StorageSetter('font_size', initFontSize);
});
$('#small-font').click(function() {
if (initFontSize < 10) {
return;
}
initFontSize -= 2;
rootContainer.css('font-size', initFontSize);
Util.StorageSetter('font_size', initFontSize);
});
$('#action_mid').click(function() {
/* Act on the event */
if (Dom.top_nav.css('display') == 'none') {
Dom.top_nav.show();
Dom.bottom_nav.show();
} else {
Dom.top_nav.hide();
Dom.bottom_nav.hide();
Dom.font_container.hide();
Dom.nav_pannel_bk.hide();
}
});
Win.scroll(function() {
Dom.top_nav.hide();
Dom.bottom_nav.hide();
Dom.font_container.hide();
Dom.nav_pannel_bk.hide();
})
}
/* Act on the event */
//调用入口函数
main();
})();
</script>
</body>
</html>
2.
2558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
