goto.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. $(window).bind('scroll', function (e) {
  2. parallaxScroll();
  3. });
  4. function parallaxScroll() {
  5. var scrolled = $(window).scrollTop();
  6. $('#act1').css('top', (30 + (scrolled * .1)) + 'px');
  7. $('#act2').css('top', (800 - (scrolled * .2)) + 'px');
  8. $('#act3').css('top', (300 - (scrolled * .1)) + 'px');
  9. $('#act4').css('top', (0 + (scrolled * .1)) + 'px');
  10. $('#act5').css('top', (800 - (scrolled * .2)) + 'px');
  11. }
  12. // 手機課程大綱輪播
  13. $("#card-box").slick({
  14. arrows: false,
  15. slidesToShow: 1,
  16. centerMode: true,
  17. infinite: false,
  18. });
  19. // 手機課程大綱彈跳視窗
  20. // 視窗一
  21. $(".box-img01").click(function () {
  22. $(".mobile01-1").fadeIn();
  23. $(".mobile-box1").fadeIn();
  24. $(".card-box-1").slick({
  25. arrows: false,
  26. slidesToShow: 1,
  27. centerMode: true,
  28. infinite: false,
  29. });
  30. });
  31. $(".close").click(function () {
  32. $(".mobile-box1").fadeOut();
  33. $(".mobile01-1").fadeOut();
  34. });
  35. // 視窗二
  36. $(".mobile01-2").fadeOut(0);
  37. $(".mobile-box2").fadeOut(0);
  38. $(".box-img02").click(function () {
  39. $(".mobile01-2").fadeIn();
  40. $(".mobile-box2").fadeIn();
  41. $(".card-box-2").slick({
  42. arrows: false,
  43. slidesToShow: 1,
  44. centerMode: true,
  45. infinite: false,
  46. });
  47. });
  48. $(".close").click(function () {
  49. $(".mobile-box2").fadeOut();
  50. $(".mobile01-2").fadeOut();
  51. });
  52. // 視窗三
  53. $(".mobile01-3").fadeOut(0);
  54. $(".mobile-box3").fadeOut(0);
  55. $(".box-img03").click(function () {
  56. $(".mobile01-3").fadeIn();
  57. $(".mobile-box3").fadeIn();
  58. $(".card-box-3").slick({
  59. arrows: false,
  60. slidesToShow: 1,
  61. centerMode: true,
  62. infinite: false,
  63. });
  64. });
  65. $(".close").click(function () {
  66. $(".mobile-box3").fadeOut();
  67. $(".mobile01-3").fadeOut();
  68. });
  69. // 手機課程日程輪播
  70. $("#card-box2").slick({
  71. arrows: false,
  72. slidesToShow: 1,
  73. centerMode: true,
  74. infinite: false,
  75. });
  76. // 手機選單彈跳視窗
  77. $("#menu-box2").hide();
  78. $("#menu-box").hide();
  79. $("#menu-btn1").click(function () {
  80. $("#menu-box").slideToggle("slow");
  81. $("#menu-box2").slideToggle("slow");
  82. });
  83. $(".link").click(function () {
  84. $("#menu-box").slideUp("slow", function () {
  85. $("#menu-box2").slideUp("slow");
  86. // Animation complete.
  87. });
  88. });
  89. $("*").each(function (index, element) {
  90. // 此元素被點選後執行
  91. $(this).click(function (e) {
  92. // 取得被點選元素的屬性:data-gt-target
  93. var target = $(this).attr("data-gt-target");
  94. var duration = $(this).attr("data-gt-duration");
  95. var offset = $(this).attr("data-gt-offset");
  96. // JS 語法:判斷式
  97. // if (條件) {程式區塊}
  98. // 當條件成立,會執行程式區塊
  99. // 如果 目標有資料 才會執行 { } 內的程式
  100. // 避免出現 undefine (未定義 - 不存在的資料)
  101. if (target) {
  102. //console.log("目標:" + target);
  103. //console.log("時間:" + duration);
  104. //console.log("位移:" + offset);
  105. // 上方位置 = 目標區塊.位移().上方位置
  106. var top = $(target).offset().top;
  107. //console.log("要前往元素的上方位置:" + top);
  108. // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
  109. // parseInt() 將文字轉為數字
  110. $("html").stop().animate({
  111. scrollTop: top - offset
  112. }, parseInt(duration));
  113. }
  114. });
  115. });
  116. // 避免動畫與使用者滾輪衝突
  117. // html 在滾動滾輪時 停止 html 所有效果
  118. $("html").on("mousewheel", function () {
  119. $("html").stop();
  120. });
  121. // gotop下滑效果
  122. $(".arrow").hide();
  123. $(window).scroll(function () {
  124. var y = window.scrollY;
  125. if (y > 10) {
  126. $(".arrow").show();
  127. } else {
  128. $(".arrow").hide();
  129. }
  130. });
  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").submit(function (e) {
  149. /* var formRef = $('#form1').serializeArray();
  150. var jsonString = JSON.stringify(formRef);*/
  151. var jsonInfo = $('.contact-form').serializeObject();
  152. var jsonString = JSON.stringify(jsonInfo);
  153. console.log(jsonString),
  154. $.ajax({
  155. type: 'POST',
  156. url: 'http://172.105.205.52:8001/add_client_info',
  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. $(function () {
  188. $(".box1").hover(
  189. function () {
  190. $("#title1").html('課程1手機拍片');
  191. $("#title1-1").html('知名媒體網站電視台店長');
  192. },
  193. function () {
  194. $("#title1").html('課程1');
  195. $("#title1-1").html('手機拍片');
  196. })
  197. });
  198. $(function () {
  199. $(".box2").hover(
  200. function () {
  201. $("#title2").html('課程2社群營造');
  202. $("#title2-1").html('資深數位廣告投手');
  203. },
  204. function () {
  205. $("#title2").html('課程2');
  206. $("#title2-1").html('社群營造');
  207. })
  208. });
  209. $(function () {
  210. $(".box3").hover(
  211. function () {
  212. $("#title3").html('課程3文案撰寫');
  213. $("#title3-1").html('資深新聞媒體工作者');
  214. },
  215. function () {
  216. $("#title3").html('課程3');
  217. $("#title3-1").html('文案撰寫');
  218. })
  219. });
  220. // 電腦版彈跳視窗
  221. $("#Course-box01").fadeOut(0);
  222. $(".Course-box01").fadeOut(0);
  223. $("#Course-box02").fadeOut(0);
  224. $(".Course-box01").fadeOut(0);
  225. $("#Course-box03").fadeOut(0);
  226. $(".Course-box01").fadeOut(0);
  227. // 電腦版視窗一
  228. $(".box1").click(function () {
  229. $("#Course-box01").fadeIn();
  230. $(".Course-box01").fadeIn();
  231. });
  232. $(".close").click(function () {
  233. $("#Course-box01").fadeOut();
  234. $(".Course-box01").fadeOut();
  235. });
  236. // 電腦版視窗二
  237. $(".box2").click(function () {
  238. $("#Course-box02").fadeIn();
  239. $(".Course-box01").fadeIn();
  240. });
  241. $(".close").click(function () {
  242. $("#Course-box02").fadeOut();
  243. $(".Course-box01").fadeOut();
  244. });
  245. // 電腦版視窗三
  246. $(".box3").click(function () {
  247. $("#Course-box03").fadeIn();
  248. $(".Course-box01").fadeIn();
  249. });
  250. $(".close").click(function () {
  251. $("#Course-box03").fadeOut();
  252. $(".Course-box01").fadeOut();
  253. });
  254. (function () {
  255. const second = 1000,
  256. minute = second * 60,
  257. hour = minute * 60,
  258. day = hour * 24;
  259. let birthday = "July 21, 2021 00:00:00",
  260. countDown = new Date(birthday).getTime(),
  261. x = setInterval(function() {
  262. let now = new Date().getTime(),
  263. distance = countDown - now;
  264. document.getElementById("days").innerText = Math.floor(distance / (day)),
  265. document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
  266. document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
  267. document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
  268. //do something later when date is reached
  269. if (distance < 0) {
  270. let headline = document.getElementById("headline"),
  271. countdown = document.getElementById("countdown"),
  272. content = document.getElementById("content");
  273. headline.innerText = "It's my birthday!";
  274. countdown.style.display = "none";
  275. content.style.display = "block";
  276. clearInterval(x);
  277. }
  278. //seconds
  279. }, 0)
  280. }());