文档章节

HTML5电子书阅读器

黄柳淞
 黄柳淞
发布于 2017/01/03 00:09
字数 2551
阅读 247
收藏 0

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>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。</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.

 

 

 

 

 

 

© 著作权归作者所有

黄柳淞
粉丝 2
博文 108
码字总数 54251
作品 0
南宁
程序员
私信 提问
苹果新规促使发行商转向HTML5应用

北京时间7月27日消息,据国外媒体报道,苹果最近实施的应用内支付新规已经迫使亚马逊﹑巴诺书店(Barnes &Noble)和Kobo等公司纷纷从其iOS应用中删除购买链接,同时Google的Google Books应用也...

小卒过河
2011/07/27
1K
3
EPUB3,电子书新格式

EPUB 是数字出版业的工业标准之一,重要性不言而喻。2011 年,5 月 23 日 International Digital Publishing Forum(以下简称 IDPF)正式确定 EPUB3 标准。与上一代 EPUB2 标准相比,EPUB3 带...

小卒过河
2011/08/06
6.4K
3
分享最好的HTML5编码教程和参考手册

原文:queness.com 编译:GBin1.com 今天我们介绍相关HTML5的参考手册,演讲稿,电子书和教程。 HTML5是新兴的web技术,虽然不是完全的新技术但是已经有很多的相关文章介绍HTML5,特别是当我...

gbin1
2011/10/21
1K
3
15本Web开发人员应该拥有的免费电子书籍

当今互联网已经成为每一个人的信息知识来源。假如你想学习任何事情,可以很容易在互联网上轻松找到相关的信息,即使它是很简单的事情。在互联网上有成千上万的教程和指南可以用来学习与工作相...

V
2011/07/10
0
0
11个有用的移动网页开发App和HTML5框架

在过去的两年里,触屏设备飞速增长。iOS和Android设备让开发者和设计师开始重新思考他们的网页应用,以提供更好的触屏体验。 移动Web应用相对于本地的App有很多优势,虽然也有很多设计和开发...

虫虫
2011/11/13
35.1K
5

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 常用注解说明

实体类 @Entity (实体类注解) @Table(可指定表名) @Data(可缺省get/set) @Id (指定属性主键) @GeneratedValue(指定主键生成规则)

兜兜毛毛
今天
3
0
局域网能互相ping通,ubuntu虚拟机不能上外网

【问题】 桥接模式老是无法上网,查看本机IP发现被分配了一个私网地址,猜测应该是虚拟DHCP服务器没有打开,于是查看Ubuntu的网络配置: /etc/network/interfaces 发现没有dhcp配置的信息,只...

tahiti_aa
今天
2
0
以太坊助记词PHP开发包简介

以太坊助记词PHP开发包用来为PHP以太坊应用增加助记词和层级确定密钥支持能力。下载地址:以太坊助记词php开发包 。 1、开发包概述 以太坊助记词PHP开发包主要包括以下特性: 生成符合BIP39...

汇智网教程
昨天
2
0
系统监控-分布式调用链Skywalking

1. 为什么要使用分布式调用链技术? 随着公司业务的高速发展,公司服务之间的调用关系愈加复杂,如何理清并跟踪它们之间的调用关系就显的比较关键。线上每一个请求会经过多个业务系统,并产生...

秋日芒草
昨天
6
0
告诉自己的一些建议

摆脱学生心态 尽快发挥自己价值,让公司感知自己的存在,才是王道 选择比努力重要 自己附着的平台的经济体要是一个快速崛起的行业 转行趁早,年龄越大选择成本越高 趁早大量试错,学习新领域...

林怡丰
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部