bookdetail.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  6. <link rel="shortcut icon" href="favicon.ico" />
  7. <link rel="bookmark" href="favicon.ico" type="image/x-icon"   />
  8. <title>2023年中国航油-管理年鉴</title>
  9. <link rel="stylesheet" href="css/mui.min.css">
  10. <link rel="stylesheet" href="css/reset.css" />
  11. <link rel="stylesheet" href="css/main.css" />
  12. <style>
  13. .m-artical-action-mid {
  14. position: fixed;
  15. width: 100%;
  16. height: 40%;
  17. top: 30%;
  18. z-index: 9998;
  19. }
  20. #muluList {
  21. /*避免导航边框和列表背景边框重叠,看起来像两条边框似得;*/
  22. margin-top: -1px;
  23. }
  24. #muluList,
  25. #muluList .mui-table-view,
  26. .list-li-a,
  27. .mui-table-view-cell>a:not(.mui-btn).mui-active {
  28. background-color: #e9dfc7;
  29. }
  30. .highChapter {
  31. color: red !important;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div>
  37. <!--中间点击层-->
  38. <div class="m-artical-action">
  39. <div class="m-artical-action-mid" id="action_mid"></div>
  40. </div>
  41. <!--顶部导航-->
  42. <div class="nav-top" id="nav_top" style="display: none;">
  43. <div class="nav_container">
  44. <div class="nav_return nav_back_book"></div>
  45. <div class="nav_text nav_back_book" id="nav_text">返回首页</div>
  46. </div>
  47. </div>
  48. <!--主体内容-->
  49. <header id="header" class="top_mulu_box">
  50. <div class="top_mulu_left">
  51. <div class="top_mulu_return nav_back_book"></div>
  52. <div class="top_mulu_text nav_back_book" id="ChapterTitle"></div>
  53. </div>
  54. <div class="top_mulu_right">
  55. <div class="top_mulu_text nav_back_book" id="topMulu">目录</div>
  56. </div>
  57. </header>
  58. <div class="container">
  59. <div class="Content">
  60. </div>
  61. <div class="page_btn">
  62. <button class="btn-prev" id="btn_prev">上一章</button>
  63. <button class="btn-next" id="btn_next">下一章</button>
  64. </div>
  65. </div>
  66. <!--底部导航栏 -->
  67. <div class="nav-bottom" id="nav_bottom" style="display: none;">
  68. <div class="btn-mulu">
  69. <div class="mulu">
  70. <div class="icon_mulu" id="icon_mulu"> </div>
  71. <div class="text_mulu">目录</div>
  72. </div>
  73. </div>
  74. <!-- <div class="btn-model">
  75. <div class="model">
  76. <div class="icon-yejian" id="icon_model"> </div>
  77. <div class="text_yejian">夜间</div>
  78. </div>
  79. </div> -->
  80. <div class="btn_Aa">
  81. <div class="Aa">
  82. <div class="icon-Aa" id="icon_Aa"> </div>
  83. <div class="text_Aa">字号</div>
  84. </div>
  85. </div>
  86. <div class="btn-extra">
  87. <div class="extra">
  88. <div class="icon-extra" id="icon_extra"> </div>
  89. <div class="text_extra">其他</div>
  90. </div>
  91. </div>
  92. <!-- 其他功能栏 -->
  93. <div class="extraPop" id="extra_Pop" style="display: none;">
  94. <div class="fontItem">
  95. <span class="fontItemTitle">背景</span>
  96. <div class="fontItemCons" id="bk-list">
  97. <div class="bk-item" id="mb">
  98. <div class="bk-container" style="background-color: #f7eee5;"></div>
  99. <span>米白</span>
  100. </div>
  101. <div class="bk-item" id="zz">
  102. <div class="bk-container" style="background-color: #e9dfc7;"></div>
  103. <span>纸张</span>
  104. </div>
  105. <div class="bk-item" id="qh">
  106. <div class="bk-container" style="background-color: #a4a4a4;"></div>
  107. <span>浅灰</span>
  108. </div>
  109. <div class="bk-item" id="hy">
  110. <div class="bk-container" style="background-color: #cdefce;"></div>
  111. <span>护眼</span>
  112. </div>
  113. <div class="bk-item" id="hl">
  114. <div class="bk-container" style="background-color: #283548;"></div>
  115. <span>海蓝</span>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <!--字号功能栏-->
  121. <div class="fontPop" id="font_Pop" style="display: none;">
  122. <div class="fontItem">
  123. <span class="fontItemTitle">字号</span>
  124. <div class="fontItemCons">
  125. <!-- <button class="btn_Big" id="btn_Big">大</button>
  126. <button class="btn_Small" id="btn_Small">小</button>-->
  127. 小<input style="width: 80%; margin: 0 auto;" type="range" id="slider" name="slider" min=16
  128. max=24 step="1">大
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <!-- 目录 -->
  134. <div class="muluBox" id="mulu_Box" style="display: none;">
  135. <div class="muluMask" id="mulu_Mask">
  136. </div>
  137. <div class="muluCons" id="mulu_Cons">
  138. <div class="muluTitle">
  139. <div>共<span id="ChapterTotal"></span>章</div>
  140. <!-- <div>倒叙/正序</div> -->
  141. </div>
  142. <div class="mui-content">
  143. <ul id="muluList" class="mui-table-view mui-table-view-chevron">
  144. </ul>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. <script src="js/mui.min.js"></script>
  150. <script type="text/javascript" src="js/jquery.min.js"></script>
  151. <script type="text/javascript" src="js/jquery.jsonp.js"></script>
  152. <script type="text/javascript" src="js/jquery.base64.js"></script>
  153. <script>
  154. //移动设备的高度
  155. let deviceHeight = document.documentElement.clientHeight;
  156. // $('.container').css('height', deviceHeight+'px')
  157. //
  158. var Dom = {
  159. font_Pop: $("#font_Pop"),
  160. extra_Pop:$("#extra_Pop"),
  161. nav_top: $("#nav_top"),
  162. nav_bottom: $("#nav_bottom"),
  163. icon_Aa: $("#icon_Aa"),
  164. icon_extra: $("#icon_extra"),
  165. body: $("body"),
  166. win: $(window),
  167. icon_model: $("#icon_model"),
  168. btn_Big: $("#btn_Big"),
  169. slider: $("#slider"),
  170. btn_Small: $("#btn_Small"),
  171. icon_mulu: $("#icon_mulu"),
  172. mulu_Box: $("#mulu_Box"),
  173. mulu_Dialog: $("#mulu_Dialog"),
  174. mulu_Mask: $("mulu_Mask"),
  175. mulu_Cons: $("#mulu_Cons"),
  176. muluList: $("#muluList"),
  177. bkList: $("#bk-list"),
  178. header: $("#header"),
  179. ChapterDialog: $("#ChapterDialog")
  180. }
  181. //数据层的初始化
  182. var RootContainer = $('.Content');
  183. var readerUIFrame = ReaderBaseFrame(RootContainer);
  184. var readerMuluFrame = ReaderMuluFrame(Dom.muluList)
  185. var File_id = 0;
  186. var Chapter_id = 0;
  187. var ChapterTotal = 0;
  188. var ChapterList = [];
  189. var readerm = ReaderModel();
  190. readerm.init(function(data, mulu) {
  191. readerUIFrame(data);
  192. ChapterList = mulu;
  193. readerMuluFrame(mulu);
  194. $("#ChapterTitle").text(data.t);
  195. });
  196. //业务事件的初始化
  197. EventHandler();
  198. var Util = (function() { //封装的本地存储和json数据解析
  199. var prefix = 'function_reader_';
  200. var StorageGetter = function(key) {
  201. return localStorage.getItem(prefix + key);
  202. }
  203. var StorageSetter = function(key, val) {
  204. return localStorage.setItem(prefix + key, val);
  205. }
  206. //通过url来获取加密信息,并解密
  207. var getJsonp = function(url, callback) {
  208. return $.jsonp({
  209. url: url,
  210. cache: true,
  211. callback: 'duokan_fiction_chapter',
  212. success: function(result) {
  213. //获取加密信息,解码、转json
  214. var data = $.base64.decode(result);
  215. var json = decodeURIComponent(escape(data));
  216. callback(json);
  217. }
  218. })
  219. }
  220. return {
  221. getJsonp: getJsonp,
  222. StorageGetter: StorageGetter,
  223. StorageSetter: StorageSetter
  224. }
  225. })();
  226. //背景颜色 存储记录
  227. var bkgroundcolor = Util.StorageGetter("bkgroundcolor");
  228. var bkCurrColor = Util.StorageGetter("bkgroundcolor");
  229. var txtCurrColor = Util.StorageGetter("txtcolor");
  230. Dom.body.css('background-color', bkgroundcolor);
  231. Dom.header.css('background-color', bkCurrColor);
  232. //字号大小 设置存储记录
  233. var InitFontSize;
  234. InitFontSize = Util.StorageGetter("font_size");
  235. InitFontSize = parseInt(InitFontSize);
  236. if (!InitFontSize) {
  237. InitFontSize = 18;
  238. }
  239. $("p").css('font-size', InitFontSize);
  240. $("h4").css('font-size', InitFontSize + 6);
  241. $("h5").css('font-size', InitFontSize + 2);
  242. Dom.slider.val(InitFontSize);
  243. function ReaderBaseFrame(container) { //UI渲染层
  244. function ParseChapterData(jsonData) { //生成要展示的 html文本
  245. let jsonObj = jsonData;
  246. CurrFontSize = Util.StorageGetter("font_size");
  247. CurrFontSize = parseInt(CurrFontSize);
  248. if (!CurrFontSize) {
  249. CurrFontSize = 18;
  250. }
  251. let TitleFontSize = CurrFontSize + 6;
  252. let RedFontSize = CurrFontSize + 2;
  253. let html = "<br/><br/><br/><br/><br/><h4 style='font-size: " + TitleFontSize + "px'>" + jsonObj.t +
  254. "</h4><br/>";
  255. if (jsonObj.ct) {
  256. let hLevel = 4;
  257. for (let i = 0; i < jsonObj.ct.length; i++) {
  258. hLevel -= 1;
  259. html += `<h${hLevel}>${jsonObj.ct[i]}</h${hLevel}><br/>`;
  260. }
  261. }
  262. for (let i = 0; i < jsonObj.p.length; i++) {
  263. if (Chapter_id == 0) {
  264. html += "<div>" + jsonObj.p[i] + "</div>";
  265. } else {
  266. if (jsonObj.p[i].indexOf('#') > -1) {
  267. html += "<br/><h5 style='color: crimson; font-size: " + RedFontSize + "px'>" + jsonObj.p[i]
  268. .replace('#', '') + "</h5>";
  269. } else {
  270. html += "<p style='font-size: " + CurrFontSize + "px'>" + jsonObj.p[i] + "</p>";
  271. }
  272. }
  273. }
  274. html = html.replace("##", )
  275. return html;
  276. }
  277. return function(data) { //返回 渲染后的结果data:解密后的json数据
  278. container.html(ParseChapterData(data));
  279. }
  280. }
  281. function ReaderMuluFrame(container) { //目录UI渲染层
  282. function ParseChapterMuluData(jsonData) { //生成要展示的 html文本
  283. let mulu = '';
  284. for (let i = 0; i < jsonData.length; i++) {
  285. let jsonObj = jsonData[i];
  286. if (jsonObj.children) {
  287. mulu +=
  288. `<li class="mui-table-view-cell mui-collapse parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-fid="${jsonObj.file_id}" href="#">${jsonObj.title}</a><ul class="mui-table-view mui-table-view-chevron">`;
  289. for (let k = 0; k < jsonObj.children.length; k++) {
  290. mulu += `<li class="mui-table-view-cell"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.children[k].chapter_id}" data-fid="${jsonObj.children[k].file_id}" href="#">
  291. ${jsonObj.children[k].title}</a></li>`;
  292. }
  293. mulu += '</ul></li>';
  294. } else {
  295. mulu += `<li class="mui-table-view-cell parentLi"><a class="mui-navigate-right list-li-a" data-cid="${jsonObj.chapter_id}" data-cid="${jsonObj.file_id}" href="#">${jsonObj.title}
  296. </a></li>`;
  297. }
  298. }
  299. mulu = mulu.replace("##", );
  300. return mulu;
  301. }
  302. return function(data) { //返回 渲染后的结果data:解密后的json数据
  303. container.html(ParseChapterMuluData(data));
  304. }
  305. }
  306. function ReaderModel() { //数据交互层
  307. //todo 获取章节信息
  308. var init = function(Uicallback) { //初始化 信息
  309. getFictionInfo(function(mulu) {
  310. getCurChaptInfo(Chapter_id, function(data) {
  311. //todo
  312. Uicallback && Uicallback(data, mulu);
  313. })
  314. })
  315. };
  316. var getFictionInfo = function(callback) { //获取所有章节摘要信息
  317. $.get('data/chapter.json', function(data) {
  318. //todo 获取章节信息之后的回调
  319. Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
  320. File_id = parseInt(Util.StorageGetter("FileId"));
  321. //选择是否从头阅读
  322. if (Chapter_id !== 0) {
  323. if (confirm('您要继续上次的阅读么?')) {} else {
  324. Chapter_id = 0;
  325. }
  326. }
  327. let list = data.chapters;
  328. for (let i = 0; i < list.length - 1; i++) {
  329. if (!isFinite(Chapter_id) && list[i].type !== 'file') {
  330. Chapter_id = list[i].chapter_id;
  331. File_id = list[i].file_id;
  332. }
  333. if (list[i].children) {
  334. ChapterTotal += list[i].children.length
  335. if (!isFinite(Chapter_id)) {
  336. Chapter_id = list[i].children[0].chapter_id;
  337. File_id = list[i].children[0].file_id;
  338. }
  339. }
  340. }
  341. callback && callback(list);
  342. }, 'json');
  343. };
  344. var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
  345. // $.get('data/data' + Chapter_id + '.json', function(data,status) {
  346. // //todo 获取详细信息之后的回调
  347. // console.log(status,'status')
  348. // if (data.result == 0) {
  349. // // var url=data.jsonp;
  350. // // Util.getJsonp(url,function(data){
  351. // callback && callback(data);
  352. // $("#ChapterTitle").text(data.t);
  353. // // });//通过url来获取加密信息,并解密
  354. // }
  355. // }, 'json');
  356. $.getJSON('data/data' + Chapter_id + '.json')
  357. .done(function(data) {
  358. // 请求成功,文件存在
  359. // console.log("文件存在", data);
  360. if (data.result == 0) {
  361. callback && callback(data);
  362. }
  363. })
  364. .fail(function(jqXHR, textStatus, errorThrown) {
  365. // console.log("文件不存在",jqXHR);
  366. callback && callback({
  367. p: [],
  368. t: "",
  369. result: 0
  370. });
  371. // 请求出错,文件不存在
  372. // if (jqXHR.status === 404) {
  373. // console.log("文件不存在");
  374. // } else {
  375. // console.log("请求出错");
  376. // }
  377. });
  378. };
  379. var prveChapter = function() { //上一页
  380. Chapter_id = parseInt(Chapter_id);
  381. if (Chapter_id == 0) {
  382. return;
  383. }
  384. Chapter_id -= 1;
  385. //调用方法获取 Chapter_id章节信息
  386. getCurChaptInfo(Chapter_id, function(data) {
  387. // console.log(data, 'data')
  388. readerUIFrame(data); //渲染html数据
  389. });
  390. Util.StorageSetter("ChapterId", Chapter_id);
  391. //
  392. updateFileId()
  393. };
  394. var nextChapter = function() { //下一页
  395. Chapter_id = parseInt(Chapter_id);
  396. if (Chapter_id == ChapterTotal) {
  397. return;
  398. }
  399. Chapter_id += 1;
  400. //调用方法获取 Chapter_id章节信息
  401. getCurChaptInfo(Chapter_id, function(data) {
  402. //console.log(data);
  403. readerUIFrame(data);
  404. });
  405. Util.StorageSetter("ChapterId", Chapter_id);
  406. //
  407. updateFileId()
  408. };
  409. var jumpChapter = function() { //跳页
  410. Chapter_id = parseInt(Chapter_id);
  411. File_id = parseInt(File_id);
  412. //调用方法获取 Chapter_id章节信息
  413. getCurChaptInfo(Chapter_id, function(data) {
  414. //console.log(data);
  415. readerUIFrame(data); //渲染html数据
  416. });
  417. Util.StorageSetter("ChapterId", Chapter_id);
  418. Util.StorageSetter("FileId", File_id);
  419. updateFileId()
  420. };
  421. var updateFileId = function() { //更新目录一级 file_id
  422. for (let item of ChapterList) {
  423. if (item.type === 'file') {
  424. let obj = item.children.find(child => child.chapter_id == Chapter_id)
  425. if (obj) {
  426. File_id = obj.file_id;
  427. $("#ChapterTitle").text(obj.title);
  428. break;
  429. }
  430. } else {
  431. if (Chapter_id === item.chapter_id) {
  432. File_id = item.file_id;
  433. $("#ChapterTitle").text(item.title);
  434. break;
  435. }
  436. Util.StorageSetter("FileId", File_id);
  437. }
  438. }
  439. }
  440. return {
  441. init: init,
  442. prveChapter: prveChapter,
  443. nextChapter: nextChapter,
  444. jumpChapter: jumpChapter,
  445. }
  446. }
  447. function EventHandler() { //业务事件处理层
  448. //点击主体中间事件
  449. $("#action_mid").click(function() {
  450. if (Dom.nav_top.css('display') == "none") {
  451. actNavDialog(true)
  452. } else {
  453. actAllDialog(false)
  454. }
  455. });
  456. //点击返回事件
  457. // $("#nav_text").click(function(){
  458. // window.location = "./pages/bookstand.html";
  459. // });
  460. $(".nav_back_book").click(function() {
  461. // window.location = "./pages/bookstand.html";
  462. Chapter_id = parseInt(Chapter_id);
  463. if (Chapter_id == 0) {
  464. return;
  465. }
  466. if (Dom.nav_top.css('display') == "none") {
  467. return;
  468. }
  469. Chapter_id = 0;
  470. readerm.jumpChapter();
  471. });
  472. //点击目录事件--顶部浮窗
  473. $("#topMulu").click(function() {
  474. muluShow("top")
  475. });
  476. //点击目录事件--底部导航
  477. $(".icon_mulu").click(function() {
  478. muluShow()
  479. });
  480. var muluShow = function(type){
  481. if (Dom.mulu_Box.css('display') == 'none') {
  482. $('body,html').addClass('notScroll');
  483. Dom.mulu_Box.show();
  484. if(type==='top'){
  485. Dom.mulu_Box.css("bottom",0)
  486. }else{
  487. Dom.mulu_Box.css("bottom",70)
  488. }
  489. Dom.nav_top.hide();
  490. Dom.mulu_Mask.show();
  491. Dom.mulu_Cons.show();
  492. //章节总数赋值
  493. $('#ChapterTotal').text(ChapterTotal)
  494. //给当前选中章节高亮
  495. let optDom = $(".parentLi")[File_id];
  496. $(optDom).addClass("mui-active");
  497. $($(optDom).find("a")).each((i, aNode) => {
  498. if ($(aNode).data('cid') == Chapter_id) {
  499. $(aNode).addClass("highChapter")
  500. } else {
  501. $(aNode).removeClass("highChapter")
  502. }
  503. })
  504. } else {
  505. muluUpdateActive();
  506. actMuluDialog(false);
  507. }
  508. actFontDialog(false)
  509. actExtraDialog(false);
  510. }
  511. //点击目录列表进行指定跳转
  512. Dom.muluList.on("click", function(e) {
  513. let cid = $(e.target).data('cid');
  514. if (!cid) {
  515. return
  516. }
  517. Chapter_id = cid;
  518. File_id = $(e.target).data('fid');
  519. $("#ChapterTitle").text(e.target.text);
  520. muluUpdateActive();
  521. readerm.jumpChapter();
  522. actAllDialog(false)
  523. window.scrollTo(0, 0);
  524. })
  525. // 点击弹窗内容以外的地方关闭弹窗
  526. $("#mulu_Mask").on('click', function(e) {
  527. // if ($(e.target).closest('#mui-content').length > 0) {
  528. // console.log('弹出框内部被点击了');
  529. // } else {
  530. // console.log('弹出框以外的部分被点击了');
  531. // 关闭弹框
  532. actAllDialog(false)
  533. // }
  534. });
  535. //点击字号事件
  536. $(".btn_Aa").click(function() {
  537. if (Dom.font_Pop.css('display') == 'none') {
  538. Dom.font_Pop.show();
  539. } else {
  540. Dom.font_Pop.hide();
  541. }
  542. actMuluDialog(false);
  543. actExtraDialog(false);
  544. });
  545. //滚动条事件
  546. Dom.win.scroll(function() {
  547. actAllDialog(false)
  548. })
  549. //点击 大、小事件
  550. Dom.slider.change(function() {
  551. let NowFontSize = $(this).val();
  552. if (NowFontSize > 24 || NowFontSize < 16) {
  553. return;
  554. }
  555. $("p").css('font-size', Number(NowFontSize));
  556. $("h4").css('font-size', Number(NowFontSize) + 6);
  557. $("h5").css('font-size', Number(NowFontSize) + 2);
  558. Util.StorageSetter("font_size", Number(NowFontSize));
  559. });
  560. Dom.btn_Big.click(function() {
  561. if (InitFontSize >= 24) {
  562. return;
  563. }
  564. InitFontSize += 1;
  565. $("p").css('font-size', InitFontSize);
  566. $("h4").css('font-size', InitFontSize);
  567. Util.StorageSetter("font_size", InitFontSize);
  568. });
  569. Dom.btn_Small.click(function() {
  570. if (InitFontSize <= 16) {
  571. return;
  572. }
  573. InitFontSize -= 1;
  574. $("p").css('font-size', InitFontSize);
  575. $("h4").css('font-size', InitFontSize);
  576. Util.StorageSetter("font_size", InitFontSize);
  577. });
  578. //点击夜间&日间 切换模式
  579. // Dom.icon_model.click((e) => {
  580. // if ($(e.target).hasClass("icon-yejian")) {
  581. // //日间模式转夜间模式
  582. // Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
  583. // Dom.icon_model.siblings().text("日间");
  584. // bkCurrColor = '#283548';
  585. // updateBgColor($("#hl").find(".bk-container"))
  586. // } else {
  587. // //夜间模式转日间模式
  588. // Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
  589. // Dom.icon_model.siblings().text("夜间");
  590. // bkCurrColor = Util.StorageGetter("bkHistory");
  591. // model = Util.StorageGetter("model") || "zz";
  592. // updateBgColor($("#" + model).find(".bk-container"))
  593. // }
  594. // });
  595. //点击其他事件
  596. $(".btn-extra").click(function() {
  597. if (Dom.extra_Pop.css('display') == 'none') {
  598. Dom.extra_Pop.show();
  599. } else {
  600. Dom.extra_Pop.hide();
  601. }
  602. actMuluDialog(false);
  603. actFontDialog(false);
  604. });
  605. //点击背景颜色切换
  606. Dom.bkList.on("click", function(e) {
  607. if (!$(e.target).hasClass("bk-container")) {
  608. return
  609. }
  610. bkCurrColor = $(e.target)[0].style.backgroundColor;
  611. updateBgColor($(e.target), "bgCheck")
  612. })
  613. //
  614. var updateBgColor = function(target, type) {
  615. $(target).addClass("bk-container-current");
  616. Dom.body.css('background-color', bkCurrColor);
  617. Dom.header.css('background-color', bkCurrColor);
  618. //更新日夜模式
  619. // let model = $(target).parent(".bk-item")[0].id;
  620. // if (model === 'hl') {
  621. // //记录夜间模式前的背景颜色和模式
  622. // Util.StorageSetter("bkHistory", Util.StorageGetter("bkgroundcolor") || "#e9dfc7");
  623. // if (type === "bgCheck") {
  624. // //点击的背景颜色选择,需要更新模式 转为日间显示
  625. // Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
  626. // Dom.icon_model.siblings().text("日间");
  627. // }
  628. // } else {
  629. // Util.StorageSetter("model", model);
  630. // if (type === "bgCheck") {
  631. // //点击的背景颜色选择,需要更新模式 转为夜间显示
  632. // Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
  633. // Dom.icon_model.siblings().text("夜间");
  634. // }
  635. // }
  636. let optDom = $(target).parent(".bk-item").siblings();
  637. $(optDom).each((i, liDom) => {
  638. $($(liDom).find(".bk-container")).removeClass("bk-container-current")
  639. })
  640. Util.StorageSetter("bkgroundcolor", bkCurrColor);
  641. }
  642. $("#btn_prev").click(function() {
  643. window.scrollTo(0, 0);
  644. readerm.prveChapter();
  645. });
  646. $("#btn_next").click(function() {
  647. window.scrollTo(0, 0);
  648. readerm.nextChapter();
  649. });
  650. }
  651. //整体弹窗 展示控制
  652. function actAllDialog(flag) {
  653. actLightDialog(flag);
  654. actFontDialog(flag);
  655. actMuluDialog(flag);
  656. actNavDialog(flag);
  657. actExtraDialog(flag);
  658. }
  659. //光亮设置 展示控制
  660. function actLightDialog(flag) {
  661. //展示
  662. if (flag) {
  663. return
  664. }
  665. //隐藏
  666. }
  667. //字号设置 展示控制
  668. function actFontDialog(flag) {
  669. //展示
  670. if (flag) {
  671. return
  672. }
  673. //隐藏
  674. Dom.font_Pop.hide();
  675. }
  676. //目录设置 展示控制
  677. function actMuluDialog(flag) {
  678. //展示
  679. if (flag) {
  680. return
  681. }
  682. //隐藏
  683. Dom.mulu_Box.hide();
  684. Dom.mulu_Mask.hide();
  685. Dom.mulu_Cons.hide();
  686. $('body,html').removeClass('notScroll');
  687. }
  688. //其他设置 展示控制
  689. function actExtraDialog(flag) {
  690. //展示
  691. if (flag) {
  692. return
  693. }
  694. //隐藏
  695. Dom.extra_Pop.hide();
  696. }
  697. //顶部导航+底部导航 展示控制
  698. function actNavDialog(flag) {
  699. //展示
  700. if (flag) {
  701. Dom.nav_top.show();
  702. Dom.nav_bottom.show();
  703. return
  704. }
  705. //隐藏
  706. Dom.nav_top.hide();
  707. Dom.nav_bottom.hide();
  708. }
  709. //给当前选中章节高亮,去掉其他
  710. function muluUpdateActive() {
  711. $(".parentLi").each((i, liDom) => {
  712. $($(liDom).find("a")).each((i, aNode) => {
  713. if ($(aNode).data('fid') == File_id) {
  714. $(liDom).addClass("mui-active")
  715. } else {
  716. $(liDom).removeClass("mui-active")
  717. }
  718. if ($(aNode).data('cid') == Chapter_id) {
  719. $(aNode).addClass("highChapter")
  720. } else {
  721. $(aNode).removeClass("highChapter")
  722. }
  723. })
  724. })
  725. }
  726. </script>
  727. </body>
  728. </html>