bookdetail.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824
  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/><h5 style='color: crimson; font-size: " + RedFontSize + "px'>" + jsonObj.p[i]
  301. .replace('#', '') + "</h5><br/>";
  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_text").click(function(){
  490. // window.location = "./pages/bookstand.html";
  491. // });
  492. $(".nav_back_book").click(function () {
  493. // window.location = "./pages/bookstand.html";
  494. Chapter_id = parseInt(Chapter_id);
  495. if (Chapter_id == 0) {
  496. return;
  497. }
  498. if (Dom.nav_top.css('display') == "none") {
  499. return;
  500. }
  501. Chapter_id = 0;
  502. readerm.jumpChapter();
  503. });
  504. //点击目录事件--顶部浮窗
  505. $("#topMulu").click(function () {
  506. muluShow("top")
  507. });
  508. //点击目录事件--底部导航
  509. $(".icon_mulu").click(function () {
  510. muluShow()
  511. });
  512. var muluShow = function (type) {
  513. if (Dom.mulu_Box.css('display') == 'none') {
  514. $('body,html').addClass('notScroll');
  515. Dom.mulu_Box.show();
  516. if (type === 'top') {
  517. Dom.mulu_Box.css("bottom", 0)
  518. } else {
  519. Dom.mulu_Box.css("bottom", 70)
  520. }
  521. Dom.nav_top.hide();
  522. Dom.mulu_Mask.show();
  523. Dom.mulu_Cons.show();
  524. //章节总数赋值
  525. $('#ChapterTotal').text(ChapterTotal)
  526. //给当前选中章节高亮
  527. let optDom = $(".parentLi")[File_id];
  528. $(optDom).addClass("mui-active");
  529. $($(optDom).find("a")).each((i, aNode) => {
  530. if ($(aNode).data('cid') == Chapter_id) {
  531. $(aNode).addClass("highChapter")
  532. } else {
  533. $(aNode).removeClass("highChapter")
  534. }
  535. })
  536. } else {
  537. muluUpdateActive();
  538. actMuluDialog(false);
  539. }
  540. actFontDialog(false)
  541. actExtraDialog(false);
  542. }
  543. //点击目录列表进行指定跳转
  544. Dom.muluList.on("click", function (e) {
  545. let cid = $(e.target).data('cid');
  546. if (cid === undefined || cid === null || cid === "") {
  547. return
  548. }
  549. Chapter_id = cid;
  550. File_id = $(e.target).data('fid');
  551. $("#ChapterTitle").text(e.target.text);
  552. muluUpdateActive();
  553. readerm.jumpChapter();
  554. actAllDialog(false)
  555. window.scrollTo(0, 0);
  556. })
  557. // 点击弹窗内容以外的地方关闭弹窗
  558. $("#mulu_Mask").on('click', function (e) {
  559. // if ($(e.target).closest('#mui-content').length > 0) {
  560. // console.log('弹出框内部被点击了');
  561. // } else {
  562. // console.log('弹出框以外的部分被点击了');
  563. // 关闭弹框
  564. actAllDialog(false)
  565. // }
  566. });
  567. //点击字号事件
  568. $(".btn_Aa").click(function () {
  569. if (Dom.font_Pop.css('display') == 'none') {
  570. Dom.font_Pop.show();
  571. } else {
  572. Dom.font_Pop.hide();
  573. }
  574. actMuluDialog(false);
  575. actExtraDialog(false);
  576. });
  577. //滚动条事件
  578. Dom.win.scroll(function () {
  579. actAllDialog(false)
  580. })
  581. //点击 大、小事件
  582. Dom.slider.change(function () {
  583. let NowFontSize = $(this).val();
  584. if (NowFontSize > 24 || NowFontSize < 16) {
  585. return;
  586. }
  587. $("p").css('font-size', Number(NowFontSize));
  588. $("h4").css('font-size', Number(NowFontSize) + 6);
  589. $("h5").css('font-size', Number(NowFontSize) + 2);
  590. Util.StorageSetter("font_size", Number(NowFontSize));
  591. });
  592. Dom.btn_Big.click(function () {
  593. if (InitFontSize >= 24) {
  594. return;
  595. }
  596. InitFontSize += 1;
  597. $("p").css('font-size', InitFontSize);
  598. $("h4").css('font-size', InitFontSize);
  599. Util.StorageSetter("font_size", InitFontSize);
  600. });
  601. Dom.btn_Small.click(function () {
  602. if (InitFontSize <= 16) {
  603. return;
  604. }
  605. InitFontSize -= 1;
  606. $("p").css('font-size', InitFontSize);
  607. $("h4").css('font-size', InitFontSize);
  608. Util.StorageSetter("font_size", InitFontSize);
  609. });
  610. //点击夜间&日间 切换模式
  611. // Dom.icon_model.click((e) => {
  612. // if ($(e.target).hasClass("icon-yejian")) {
  613. // //日间模式转夜间模式
  614. // Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
  615. // Dom.icon_model.siblings().text("日间");
  616. // bkCurrColor = '#283548';
  617. // updateBgColor($("#hl").find(".bk-container"))
  618. // } else {
  619. // //夜间模式转日间模式
  620. // Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
  621. // Dom.icon_model.siblings().text("夜间");
  622. // bkCurrColor = Util.StorageGetter("bkHistory");
  623. // model = Util.StorageGetter("model") || "zz";
  624. // updateBgColor($("#" + model).find(".bk-container"))
  625. // }
  626. // });
  627. //点击其他事件
  628. $(".btn-extra").click(function () {
  629. if (Dom.extra_Pop.css('display') == 'none') {
  630. Dom.extra_Pop.show();
  631. } else {
  632. Dom.extra_Pop.hide();
  633. }
  634. actMuluDialog(false);
  635. actFontDialog(false);
  636. });
  637. //点击背景颜色切换
  638. Dom.bkList.on("click", function (e) {
  639. if (!$(e.target).hasClass("bk-container")) {
  640. return
  641. }
  642. bkCurrColor = $(e.target)[0].style.backgroundColor;
  643. updateBgColor($(e.target), "bgCheck")
  644. })
  645. //
  646. var updateBgColor = function (target, type) {
  647. $(target).addClass("bk-container-current");
  648. Dom.body.css('background-color', bkCurrColor);
  649. Dom.header.css('background-color', bkCurrColor);
  650. //更新日夜模式
  651. // let model = $(target).parent(".bk-item")[0].id;
  652. // if (model === 'hl') {
  653. // //记录夜间模式前的背景颜色和模式
  654. // Util.StorageSetter("bkHistory", Util.StorageGetter("bkgroundcolor") || "#e9dfc7");
  655. // if (type === "bgCheck") {
  656. // //点击的背景颜色选择,需要更新模式 转为日间显示
  657. // Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
  658. // Dom.icon_model.siblings().text("日间");
  659. // }
  660. // } else {
  661. // Util.StorageSetter("model", model);
  662. // if (type === "bgCheck") {
  663. // //点击的背景颜色选择,需要更新模式 转为夜间显示
  664. // Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
  665. // Dom.icon_model.siblings().text("夜间");
  666. // }
  667. // }
  668. let optDom = $(target).parent(".bk-item").siblings();
  669. $(optDom).each((i, liDom) => {
  670. $($(liDom).find(".bk-container")).removeClass("bk-container-current")
  671. })
  672. Util.StorageSetter("bkgroundcolor", bkCurrColor);
  673. }
  674. $("#btn_prev").click(function () {
  675. window.scrollTo(0, 0);
  676. readerm.prveChapter();
  677. });
  678. $("#btn_next").click(function () {
  679. window.scrollTo(0, 0);
  680. readerm.nextChapter();
  681. });
  682. }
  683. //整体弹窗 展示控制
  684. function actAllDialog(flag) {
  685. actLightDialog(flag);
  686. actFontDialog(flag);
  687. actMuluDialog(flag);
  688. actNavDialog(flag);
  689. actExtraDialog(flag);
  690. }
  691. //光亮设置 展示控制
  692. function actLightDialog(flag) {
  693. //展示
  694. if (flag) {
  695. return
  696. }
  697. //隐藏
  698. }
  699. //字号设置 展示控制
  700. function actFontDialog(flag) {
  701. //展示
  702. if (flag) {
  703. return
  704. }
  705. //隐藏
  706. Dom.font_Pop.hide();
  707. }
  708. //目录设置 展示控制
  709. function actMuluDialog(flag) {
  710. //展示
  711. if (flag) {
  712. return
  713. }
  714. //隐藏
  715. Dom.mulu_Box.hide();
  716. Dom.mulu_Mask.hide();
  717. Dom.mulu_Cons.hide();
  718. $('body,html').removeClass('notScroll');
  719. }
  720. //其他设置 展示控制
  721. function actExtraDialog(flag) {
  722. //展示
  723. if (flag) {
  724. return
  725. }
  726. //隐藏
  727. Dom.extra_Pop.hide();
  728. }
  729. //顶部导航+底部导航 展示控制
  730. function actNavDialog(flag) {
  731. //展示
  732. if (flag) {
  733. Dom.nav_top.show();
  734. Dom.nav_bottom.show();
  735. return
  736. }
  737. //隐藏
  738. Dom.nav_top.hide();
  739. Dom.nav_bottom.hide();
  740. }
  741. //给当前选中章节高亮,去掉其他
  742. function muluUpdateActive() {
  743. $(".parentLi").each((i, liDom) => {
  744. $($(liDom).find("a")).each((i, aNode) => {
  745. if ($(aNode).data('fid') == File_id) {
  746. $(liDom).addClass("mui-active")
  747. } else {
  748. $(liDom).removeClass("mui-active")
  749. }
  750. if ($(aNode).data('cid') == Chapter_id) {
  751. $(aNode).addClass("highChapter")
  752. } else {
  753. $(aNode).removeClass("highChapter")
  754. }
  755. })
  756. })
  757. }
  758. </script>
  759. </body>
  760. </html>