section1.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. function showGridIntro() {
  2. ads('show-intro');
  3. $('#grid-intro').fadeIn();
  4. }
  5. function closeGridIntro() {
  6. rds('show-intro');
  7. $('#grid-intro').fadeOut();
  8. }
  9. function openLeftBtn() {
  10. $('.leftbtn').toggleClass('active');
  11. }
  12. // 荣誉
  13. function showHonor() {
  14. $('.honorbox').fadeIn();
  15. $('.page').addClass('zuiwaimian');
  16. return false;
  17. }
  18. //说明
  19. function showInfo() {
  20. $('.infobox').fadeIn();
  21. $('.page').addClass('zuiwaimian');
  22. return false;
  23. }
  24. var unClickArr = [];
  25. var clickType = '';
  26. var cardArray = [];
  27. var isAutofan = true; //是否自动翻转
  28. var isSwitchingOver = true; //切换动画是否播放完毕
  29. // var changeTime = 1000 * 60 * 60 * 24; //默认2分钟切换一次类型 ---玉姐要求不再自动切换 故2分钟改成一天60*24 hxl
  30. function backClick() {
  31. isAutofan = true;
  32. $('.iframebox').fadeOut().html('');
  33. }
  34. function pingzhang(e, type, typename) {
  35. e.stopPropagation();
  36. isAutofan = false;
  37. $('.iframebox')
  38. .html(
  39. `<iframe src="./card.html?type=${type}&typename=${typename}"></iframe><div class="back_btn" onclick="backClick()"></div>`
  40. )
  41. .fadeIn();
  42. }
  43. var typeArr = Object.keys(material_gldata);
  44. /* function autoFanZhuan() {
  45. let num = 0;
  46. let tts = setInterval(() => {
  47. let lastNum = num; // 保存上一次的num值
  48. num = Math.floor(Math.random() * typeArr.length); // 重新生成num
  49. // 如果本次num与上一次num相同,则再计算一次num
  50. while (num === lastNum) {
  51. num = Math.floor(Math.random() * typeArr.length);
  52. }
  53. if (isAutofan && isSwitchingOver) {
  54. fanzhuan(typeArr[num]);
  55. $(".option li").removeClass("active");
  56. $(".option li").each(function () {
  57. if ($(this).find("span").text().trim() === typeArr[num]) {
  58. $(this).addClass("active");
  59. }
  60. });
  61. }
  62. isAutofan = true;
  63. }, changeTime);
  64. } */
  65. function fanzhuan(type) {
  66. unClickArr = [];
  67. for (let i = 0; i < cardArray.length; i++) {
  68. let item = lxs[cardArray[i]];
  69. if (item.material_gl?.includes(type) || type == '全部') {
  70. unClickArr.push(cardArray[i]);
  71. }
  72. }
  73. gridController.updateInit(unClickArr);
  74. }
  75. $(function () {
  76. getWwList();
  77. setTimeout(() => {
  78. $('.select').addClass('active');
  79. $('.option').addClass('active');
  80. }, 2000);
  81. $('.infobox').bind('mouseleave', function (e) {
  82. $('.infobox').fadeOut();
  83. $('.page').removeClass('zuiwaimian');
  84. });
  85. $('.infobox,.infobox span').bind('click', function (e) {
  86. $('.infobox').fadeOut();
  87. $('.page').removeClass('zuiwaimian');
  88. });
  89. $('.honorbox').bind('click', function (e) {
  90. $('.honorbox').fadeOut();
  91. $('.page').removeClass('zuiwaimian');
  92. });
  93. });
  94. // 获取文物列表
  95. function getWwList() {
  96. for (let id in lxs) {
  97. let item = lxs[id];
  98. cardArray.push(id);
  99. }
  100. let liStr =
  101. "<li class='active' onclick='choseWwType(this)'><span>全部</span></li>";
  102. typeArr.map((str) => {
  103. liStr += "<li onclick='choseWwType(this)'><span>" + str + '</span></li>';
  104. });
  105. $('.option').html(liStr);
  106. $('.option li').click(function () {});
  107. // autoFanZhuan();
  108. navigationController.startSite();
  109. gridController.init(cardArray);
  110. }
  111. function choseWwType(that) {
  112. $('.option li').removeClass('active');
  113. $(that).addClass('active');
  114. var _text = $(that).find('span').text();
  115. if (_text == clickType) return;
  116. clickType = _text;
  117. fanzhuan(_text);
  118. }
  119. //文物类型内容
  120. function getWwType(wwinfo) {
  121. let list = [
  122. 'dynasty',
  123. 'origin',
  124. 'crafts',
  125. 'decoration',
  126. 'material',
  127. 'type',
  128. 'inscription',
  129. 'usage',
  130. 'meaning',
  131. ];
  132. let list2 = [
  133. 'dynasty',
  134. 'origin',
  135. 'crafts_gl',
  136. 'decoration_gl',
  137. 'material',
  138. 'type_gl',
  139. 'inscription',
  140. 'usage',
  141. 'meaning',
  142. ];
  143. var html = '';
  144. var chtml = '';
  145. wwinfo.colors.split(',').map((item) => {
  146. return (chtml += `<i onclick="pingzhang(event,'colors','${item.replace(
  147. '#',
  148. ''
  149. )}')" style="background-color:${item}"></i>`);
  150. });
  151. html += `<li class='colors'>${chtml}</li>`;
  152. list.map((item, index) => {
  153. let info = list2[index];
  154. if (wwinfo[item] && wwinfo[info]) {
  155. html += `<li onclick="pingzhang(event,'${info}','${
  156. wwinfo[info].split('、')[0]
  157. }')">${wwinfo[item]}</li><br/>`;
  158. }
  159. });
  160. $('#wwtype').html(html);
  161. // if (window.isMobile) {
  162. // // 选择 class 为 scroll 的元素
  163. // const scrollElement = document.querySelector('#wwtype');
  164. // setTimeout(function () {
  165. // // 滚动到最右侧
  166. // scrollElement.scrollTo({
  167. // left: scrollElement.scrollWidth,
  168. // behavior: 'smooth',
  169. // });
  170. // }, 500);
  171. // // 2 秒后滚动回最左侧
  172. // setTimeout(() => {
  173. // scrollElement.scrollTo({
  174. // left: 0,
  175. // behavior: 'smooth',
  176. // });
  177. // }, 1500);
  178. // }
  179. }
  180. // 关联文物
  181. function showExplore(id) {
  182. let item = lxs[id];
  183. $('.exploreiframe')
  184. .fadeIn()
  185. .html(`<iframe src="./explore.html?id=${id}"></iframe>`);
  186. }
  187. //打开时间轴页面
  188. function showTimeline() {
  189. $('.select').addClass('zuiwaimian');
  190. if ($('.timelineicon').hasClass('active')) {
  191. return;
  192. }
  193. $('.option').removeClass('active');
  194. isAutofan = false;
  195. $('.typeicon').removeClass('active');
  196. $('.timelineicon').addClass('active');
  197. $('.timelinewrap').fadeIn(500);
  198. $('.timelineiframe').fadeIn().html(`<iframe src="./timeline.html"></iframe>`);
  199. $('.page').addClass('zuiwaimian');
  200. }
  201. //关闭时间轴页面
  202. function closeTimeline() {
  203. $('.select').removeClass('zuiwaimian');
  204. isAutofan = true;
  205. $('.timelineiframe').fadeOut().html('');
  206. $('.timelinewrap').fadeOut(500);
  207. $('.option').addClass('active');
  208. $('.typeicon').addClass('active');
  209. $('.timelineicon').removeClass('active');
  210. $('.page').removeClass('zuiwaimian');
  211. }
  212. //点击类型按钮
  213. function showTypeCont() {
  214. if ($('.typeicon').hasClass('active')) {
  215. return;
  216. }
  217. closeTimeline();
  218. }
  219. //关闭探索页面
  220. function closeExploreWrap() {
  221. isAutofan = true;
  222. $('.exploreiframe').fadeOut().html('');
  223. $('.explorewrap').fadeOut(500);
  224. $('.option').addClass('active');
  225. $('.typeicon').addClass('active');
  226. $('.timelineicon').removeClass('active');
  227. $('.page').removeClass('zuiwaimian');
  228. }
  229. // 打开关联页面
  230. function showAllExplore(id) {
  231. isAutofan = false;
  232. $('.explorewrap').fadeIn(500);
  233. getWwType(lxs[id]);
  234. showExplore(id);
  235. $('.page').addClass('zuiwaimian');
  236. }
  237. // 获取一个随机的id
  238. function getRandomId(excludeId, data) {
  239. if (data.length > 1) {
  240. var randomIndex;
  241. do {
  242. randomIndex = Math.floor(Math.random() * data.length);
  243. } while (data[randomIndex] === excludeId);
  244. return data[randomIndex];
  245. } else {
  246. return '';
  247. }
  248. }