bookdetail.html 23 KB

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