电子书效果（章节+翻页）-html代码-BFW代码库

代码语言：html

所属分类：其他

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻书效果</title>
   <style>
       @charset "UTF-8";
/*reset start*/
*,ul.dl,ol,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}
html{font-family:'PingFang SC'; -webkit-font-smoothing: antialiased;}
a{text-decoration:none;  color:#2a2a2a;}
strong,b,h1,h2,h3,h4,h5,h6{ font-weight:normal;}
i,em{font-style:normal;}
a img{border:0;}
li{list-style:none;  }
.clearfix:after{display:block; content:''; clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}
table{border-collapse:collapse;}
th,td{border:none; padding:0;}
/*input,textarea{outline:none; -webkit-appearance: none;}*/
img{border:none;}
input{outline:medium;}
input, textarea, select, button { font-family:'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;}

.page_d{width:566px; height:776px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/page_d.jpg) no-repeat;}
.back_catalog{width:213px; height:67px; position:absolute; top:-84px; color:#7c6a20; text-align:center; line-height: 58px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/back.png) no-repeat; font-size:22px; right:54px;}

.banner_title{width:664px; height:254px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/title.png) no-repeat; position:absolute; left:50%; margin-left:-332px; top:107px;}
.book_box{position:absolute; left:50%; top:100px; margin-left:-593px; width:1186px; height:820px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/shu.jpg) no-repeat;}
.book_box .book_content{width:1121px; height:776px; position:absolute; left:33px; top:17px; z-index:9999;}

.bookmark{position:absolute; top:129px; left:0;}
.bookmark li{cursor:pointer; width:67px; height:42px;  text-align:center; line-height:42px; color:#fff; border-radius: 5px 0 0 5px; font-size:18px; margin-bottom:10px;}
.bookmark .mark_01{margin-left:-34px; background:#e53b28;}
.bookmark .mark_02{width:106px; margin-left:-73px; background:#e53b28; margin-bottom:39px;}
.bookmark .mark_03{width:106px; margin-left:-78px; background:#f48c2c;}
.bookmark .mark_04{width:106px; margin-left:-78px; background:#f48c2c; margin-bottom:39px;}
.bookmark .mark_05{width:106px; margin-left:-84px; background:#cadb14;}
.bookmark .mark_06{width:106px; margin-left:-84px; background:#cadb14; margin-bottom:39px;}
.bookmark .mark_07{width:106px; margin-left:-88px; background:#45b3c3;}
.bookmark .mark_08{width:106px; margin-left:-88px; background:#45b3c3; margin-bottom:39px;}

.cover{width:555px; height:776px; background:red; position:absolute; top:17px; left:33px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/page_L1.jpg) no-repeat;}
.Shadowe{width:566px; height:776px; background:red; position:absolute; top:17px; right:32px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/page_d.jpg) no-repeat;}
.book_box .w_title{font-size:27px; color:#fff; text-align:center; position:absolute; top:47px; left:0; width:100%;}
.book_box .pre_page{ cursor: pointer; position:absolute; bottom:23px; left:26px; color:#fff; font-size:24px;}
.book_box .next_page{cursor: pointer; position:absolute; bottom:23px; right:26px; color:#fff; font-size:24px;}
.book_box .book_text{text-align:center; width:510px; height:680px; margin:22px auto 0; overflow-y:none;}
.book_box .book_text p{text-align:left;}
.book_box .book_pic{ width:477px; height:103px; background:url(http://repo.bfw.wiki/bfwrepo/image/book/book_pic.png) no-repeat; margin:0 auto; margin-bottom:28px; color:#095d7e; overflow:hidden;}
.book_box .book_pic p{font-size:21px;     margin: 53px 0 0 123px;}
.book_box .text_pl{color:#fff; font-size:18px; line-height:30px; width:480px; margin:0 auto; margin-bottom:25px;}
body{overflow:hidden;}
.book_box .book_text .school_list{width:100%;}
.book_box .book_text .school_list li{width:126px; border:1px solid #fff; margin-left:-1px; font-size:14px; color:#fff; text-align:center; margin-top:-1px; }
.book_box .book_text .school_list li.list01{height:30px; line-height:30px;}
.book_box .book_text .school_list li.list02{height:74px;}
.book_box .book_text .school_list li p{text-align:center;}
.book_box .book_text .school_list li p.cnname{margin-top:16px; text-align:left; text-indent: 6px;}
.book_box .book_text .school_list li p.enname{font-size:12px; text-align:left; text-indent: 6px;}
.book_box .book_text table td{border:1px solid #fff; color:#fff; width:500px; padding:4px 6px;}
.book_box .book_text table td a{color:#fff; display:inline-block; width:100%; height:100%; line-height:14px;}
.book_box .book_text table td .enname{font-size:12px;}

   </style>
</head>
<body>
<div class="book_box" style="z-index: 0">
    <div class="book_content flipbook"></div>
    <div id="cover" class="cover">
        <p class="w_title">第一章 前言</p>
    </div>
    <div class="Shadowe">
        <div class="book_text"></div>
    </div>

    <a href="javascript:void(0)" class="back_catalog">返回前言</a>
    <ul class="bookmark">
        <li class="mark_01" data-id="1">前言</li>
        <li class="mark_02" data-id="2">第二章</li>
        <li class="mark_03" data-id="4">第三章</li>
        <li class="mark_04" data-id="6">第四章</li>
        <li class="mark_05" data-id="8">第五章</li>
        <li class="mark_06" data-id="10">第六章</li>
    </ul>
</div>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/turn.js"></script>
<script type="text/javascript" >
    $(function(){
    var book_data = [];
    var  book_data=[
        {
            img: "",
            num: 1,
            text: [
                "第一章内容",
            ],
            title: "",
            type: 1
        },{
            img: "http://repo.bfw.wiki/bfwrepo/image/book/page_L2.jpg",
            num: 0,
            text: [],
            title: "第二章 美国高中分类",
            type: 2
        }
        ,{
            img: "",
            num: 0,
            text: ["第二章 美国高中分类"
            ],
            title: "",
            type: 1
        },{
            img: "http://repo.bfw.wiki/bfwrepo/image/book/page_L3.jpg",
            num: 1,
            title: "第三章",
            text: [],
            type: 2
        },{
            img: "http://repo.bfw.wiki/bfwrepo/image/book/page_L4.jpg",
            num: 1,
            title: "",
            text: ["第三章内容"],
            type: 1
        .........完整代码请登录后点击上方下载按钮下载查看