goto.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. // sec03排名table輪播
  2. $('#sec03-slider').slick({
  3. arrows: false,
  4. slidesToShow: 1,
  5. slidesToScroll: 1,
  6. infinite:false,
  7. });
  8. // sec05 熱門作品 手機輪播
  9. $('#sec05-moblie-slider').slick({
  10. arrows: false,
  11. slidesToShow: 1,
  12. slidesToScroll: 1,
  13. infinite:true,
  14. });
  15. // sec05桌機輪播
  16. $('#sec05-destop-slider').slick({
  17. arrows: true,
  18. slidesToShow: 3,
  19. slidesToScroll: 3,
  20. infinite:true,
  21. });
  22. // sec06桌機輪波
  23. // $('#sec06-container').slick({
  24. // arrows: true,
  25. // slidesToShow: 4,
  26. // slidesToScroll: 3,
  27. // infinite:true,
  28. // });
  29. $(function(){
  30. $('#sec06-container').slick({
  31. arrows: true,
  32. slidesToShow: 4,
  33. slidesToScroll: 3,
  34. infinite:true,
  35. responsive: [
  36. {
  37. breakpoint: 600, // RWD在1024寬度時切換顯示數量
  38. settings: {
  39. slidesToShow: 1, //一次顯示3個
  40. slidesToScroll: 1,//切換下一頁時移動3個
  41. }
  42. },{
  43. breakpoint: 600,// RWD在600寬度時切換顯示數量
  44. settings: {
  45. slidesToShow: 1,//一次顯示2個
  46. slidesToScroll: 1,//切換下一頁時移動2個
  47. }
  48. },
  49. ]
  50. });
  51. })
  52. // sec04 洞察報告 手機輪播
  53. $('#sec04-moblie-container').slick({
  54. arrows: false,
  55. slidesToShow: 1,
  56. slidesToScroll: 1,
  57. infinite:false,
  58. centerMode: true,
  59. });
  60. // 手機板menu彈跳視窗
  61. $("#menu-box2").hide();
  62. $("#menu-box").hide();
  63. $(".link").click(function () {
  64. $("#menu-box").fadeOut("slow", function () {
  65. $("#menu-box2").fadeOut("slow");
  66. // Animation complete.
  67. });
  68. });
  69. $("#menu-btn1").click(function () {
  70. $("#menu-box").fadeIn();
  71. $("#menu-box2").fadeIn();
  72. });
  73. $(".close").click(function () {
  74. $("#menu-box").fadeOut();
  75. $("#menu-box2").fadeOut();
  76. });
  77. $("*").each(function (index, element) {
  78. // 此元素被點選後執行
  79. $(this).click(function (e) {
  80. // 取得被點選元素的屬性:data-gt-target
  81. var target = $(this).attr("data-gt-target");
  82. var duration = $(this).attr("data-gt-duration");
  83. var offset = $(this).attr("data-gt-offset");
  84. // JS 語法:判斷式
  85. // if (條件) {程式區塊}
  86. // 當條件成立,會執行程式區塊
  87. // 如果 目標有資料 才會執行 { } 內的程式
  88. // 避免出現 undefine (未定義 - 不存在的資料)
  89. if (target) {
  90. //console.log("目標:" + target);
  91. //console.log("時間:" + duration);
  92. //console.log("位移:" + offset);
  93. // 上方位置 = 目標區塊.位移().上方位置
  94. var top = $(target).offset().top;
  95. //console.log("要前往元素的上方位置:" + top);
  96. // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
  97. // parseInt() 將文字轉為數字
  98. $("html").stop().animate({
  99. scrollTop: top - offset
  100. }, parseInt(duration));
  101. }
  102. });
  103. });
  104. // 避免動畫與使用者滾輪衝突
  105. // html 在滾動滾輪時 停止 html 所有效果
  106. $("html").on("mousewheel", function () {
  107. $("html").stop();
  108. });