电子书效果(章节+翻页)
代码语言: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 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0