goto.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. // sec03排名table輪播
  2. $('#sec03-slider').slick({
  3. arrows: false,
  4. slidesToShow: 1,
  5. slidesToScroll: 1,
  6. infinite: true,
  7. });
  8. $('#sec03-slider-next').click(function () {
  9. $('#sec03-slider').slick('slickNext')
  10. });
  11. // sec05 熱門作品 手機輪播
  12. $('#sec05-moblie-slider').slick({
  13. arrows: false,
  14. slidesToShow: 1,
  15. slidesToScroll: 1,
  16. infinite: true,
  17. });
  18. $('#sec05-slider-next').click(function () {
  19. $('#sec05-moblie-slider').slick('slickNext')
  20. });
  21. // sec05桌機輪播
  22. $('#sec05-destop-slider').slick({
  23. arrows: true,
  24. slidesToShow: 3,
  25. slidesToScroll: 3,
  26. infinite: true,
  27. });
  28. // sec06桌機輪波
  29. // $('#sec06-container').slick({
  30. // arrows: true,
  31. // slidesToShow: 4,
  32. // slidesToScroll: 3,
  33. // infinite:true,
  34. // });
  35. $(function () {
  36. $('#sec06-container').slick({
  37. arrows: false,
  38. slidesToShow: 4,
  39. slidesToScroll: 3,
  40. infinite: true,
  41. responsive: [
  42. {
  43. breakpoint: 600, // RWD在1024寬度時切換顯示數量
  44. settings: {
  45. slidesToShow: 1, //一次顯示3個
  46. slidesToScroll: 1,//切換下一頁時移動3個
  47. }
  48. }, {
  49. breakpoint: 600,// RWD在600寬度時切換顯示數量
  50. settings: {
  51. slidesToShow: 1,//一次顯示2個
  52. slidesToScroll: 1,//切換下一頁時移動2個
  53. }
  54. },
  55. ]
  56. });
  57. })
  58. // sec04 洞察報告 手機輪播
  59. $('#sec04-moblie-container').slick({
  60. arrows: false,
  61. slidesToShow: 1,
  62. slidesToScroll: 1,
  63. infinite: false,
  64. // centerMode: true,
  65. });
  66. $('#sec04-slider-next').click(function () {
  67. $('#sec04-moblie-container').slick('slickNext')
  68. });
  69. // 手機板menu彈跳視窗
  70. $("#menu-box2").hide();
  71. $("#menu-box").hide();
  72. $(".link").click(function () {
  73. $("#menu-box").fadeOut("slow", function () {
  74. $("#menu-box2").fadeOut("slow");
  75. // Animation complete.
  76. });
  77. });
  78. $("#menu-btn1").click(function () {
  79. $("#menu-box").fadeIn();
  80. $("#menu-box2").fadeIn();
  81. });
  82. $(".close").click(function () {
  83. $("#menu-box").fadeOut();
  84. $("#menu-box2").fadeOut();
  85. });
  86. $("*").each(function (index, element) {
  87. // 此元素被點選後執行
  88. $(this).click(function (e) {
  89. // 取得被點選元素的屬性:data-gt-target
  90. var target = $(this).attr("data-gt-target");
  91. var duration = $(this).attr("data-gt-duration");
  92. var offset = $(this).attr("data-gt-offset");
  93. // JS 語法:判斷式
  94. // if (條件) {程式區塊}
  95. // 當條件成立,會執行程式區塊
  96. // 如果 目標有資料 才會執行 { } 內的程式
  97. // 避免出現 undefine (未定義 - 不存在的資料)
  98. if (target) {
  99. //console.log("目標:" + target);
  100. //console.log("時間:" + duration);
  101. //console.log("位移:" + offset);
  102. // 上方位置 = 目標區塊.位移().上方位置
  103. var top = $(target).offset().top;
  104. //console.log("要前往元素的上方位置:" + top);
  105. // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
  106. // parseInt() 將文字轉為數字
  107. $("html").stop().animate({
  108. scrollTop: top - offset
  109. }, parseInt(duration));
  110. }
  111. });
  112. });
  113. // 避免動畫與使用者滾輪衝突
  114. // html 在滾動滾輪時 停止 html 所有效果
  115. $("html").on("mousewheel", function () {
  116. $("html").stop();
  117. });
  118. $(".sec03-table-title").addClass("contant-toggle");
  119. $("#sec03-slider").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  120. console.log('beforeChangeEvent: currenSlide=' + currentSlide + ', nextSlide= ' + nextSlide);
  121. if (nextSlide == 1) {
  122. $(".sec03-table-title").removeClass("contant-toggle");
  123. $(".sec03-table-title2").addClass("contant-toggle");
  124. }
  125. else if (nextSlide == 0) {
  126. $(".sec03-table-title2").removeClass("contant-toggle");
  127. $(".sec03-table-title").addClass("contant-toggle");
  128. }
  129. });
  130. // 電腦版email
  131. $.fn.serializeObject = function () {
  132. var o = {};
  133. var a = this.serializeArray();
  134. // o["id"] = 0;
  135. // o["time_stamp"] = "";
  136. $.each(a, function () {
  137. if (o[this.name]) {
  138. if (!o[this.name].push) {
  139. o[this.name] = [o[this.name]];
  140. }
  141. o[this.name].push(this.value || '');
  142. } else {
  143. o[this.name] = this.value || '';
  144. }
  145. });
  146. return o;
  147. };
  148. $(".contact-form-destop").submit(function (e) {
  149. /* var formRef = $('#form1').serializeArray();
  150. var jsonString = JSON.stringify(formRef);*/
  151. var jsonInfo = $('.contact-form-destop').serializeObject();
  152. var jsonString = JSON.stringify(jsonInfo);
  153. console.log(jsonString),
  154. $.ajax({
  155. type: 'POST',
  156. url: 'https://nftboard.info:8001/add_sub',
  157. data: jsonString,
  158. dataType: 'json',
  159. success: function (data) {
  160. console.log('送出成功: ' + data);
  161. alert("訂閱成功");
  162. // if (data == 0) {
  163. // alert("送出成功");
  164. // } else if (data == 1) {
  165. // alert("此email已填過表單");
  166. // } else if (data == 2) {
  167. // alert("此phone已填過表單");
  168. // } else if (data == 3) {
  169. // alert("此email、phone已填過表單");
  170. // }
  171. // location.reload();
  172. },
  173. beforeSend: function () {
  174. console.log('beforeSend');
  175. },
  176. complete: function () {
  177. console.log('complete');
  178. },
  179. error: function (jqXHR, textStatus, errorThrown) {
  180. console.log(JSON.stringify(jqXHR));
  181. console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
  182. console.log('送出失敗: ' + jqXHR.responseText);
  183. }
  184. });
  185. return false;
  186. });
  187. // 手機板 email
  188. $.fn.serializeObject = function () {
  189. var o = {};
  190. var a = this.serializeArray();
  191. $.each(a, function () {
  192. if (o[this.name]) {
  193. if (!o[this.name].push) {
  194. o[this.name] = [o[this.name]];
  195. }
  196. o[this.name].push(this.value || '');
  197. } else {
  198. o[this.name] = this.value || '';
  199. }
  200. });
  201. return o;
  202. };
  203. $(".contact-form-mobile").submit(function (e) {
  204. /* var formRef = $('#form1').serializeArray();
  205. var jsonString = JSON.stringify(formRef);*/
  206. var jsonInfo = $('.contact-form-mobile').serializeObject();
  207. var jsonString = JSON.stringify(jsonInfo);
  208. console.log(jsonString),
  209. $.ajax({
  210. type: 'POST',
  211. url: 'https://nftboard.info:8001/add_sub',
  212. data: jsonString,
  213. dataType: 'json',
  214. success: function (data) {
  215. console.log('送出成功: ' + data);
  216. alert("訂閱成功");
  217. // if (data == 0) {
  218. // alert("送出成功");
  219. // } else if (data == 1) {
  220. // alert("此email已填過表單");
  221. // } else if (data == 2) {
  222. // alert("此phone已填過表單");
  223. // } else if (data == 3) {
  224. // alert("此email、phone已填過表單");
  225. // }
  226. location.reload();
  227. },
  228. beforeSend: function () {
  229. console.log('beforeSend');
  230. },
  231. complete: function () {
  232. console.log('complete');
  233. },
  234. error: function (jqXHR, textStatus, errorThrown) {
  235. console.log(JSON.stringify(jqXHR));
  236. console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
  237. console.log('送出失敗: ' + jqXHR.responseText);
  238. }
  239. });
  240. return false;
  241. });
  242. $(function() {
  243. $("#sec05-moblie").swipe( { fingers:'all', swipeLeft:swipe1, swipeRight:swipe2} );
  244. function swipe1(event, direction, distance, duration, fingerCount) {
  245. $('#sec05-moblie-slider').slick('slickNext')//向左滑動你要執行的動作
  246. }
  247. function swipe2(event, direction, distance, duration, fingerCount) {
  248. $('#sec05-moblie-slider').slick('slickPrev') //向右滑動你要執行的動作
  249. }
  250. });
  251. $(function() {
  252. $(".sec05-button").swipe( { fingers:'all', swipeLeft:swipe1, swipeRight:swipe2} );
  253. function swipe1(event, direction, distance, duration, fingerCount) {
  254. $('#sec05-moblie-slider').slick('slickNext')//向左滑動你要執行的動作
  255. }
  256. function swipe2(event, direction, distance, duration, fingerCount) {
  257. $('#sec05-moblie-slider').slick('slickPrev') //向右滑動你要執行的動作
  258. }
  259. });