index.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. $(".gototop").hide();
  2. $(window).scroll(function () {
  3. var y = window.scrollY;
  4. if (y > 10) {
  5. $(".gototop").show();
  6. } else {
  7. $(".gototop").hide();
  8. }
  9. });
  10. $("*").each(function (index, element) {
  11. // 此元素被點選後執行
  12. $(this).click(function (e) {
  13. // 取得被點選元素的屬性:data-gt-target
  14. var target = $(this).attr("data-gt-target");
  15. var duration = $(this).attr("data-gt-duration");
  16. var offset = $(this).attr("data-gt-offset");
  17. // JS 語法:判斷式
  18. // if (條件) {程式區塊}
  19. // 當條件成立,會執行程式區塊
  20. // 如果 目標有資料 才會執行 { } 內的程式
  21. // 避免出現 undefine (未定義 - 不存在的資料)
  22. if (target) {
  23. //console.log("目標:" + target);
  24. //console.log("時間:" + duration);
  25. //console.log("位移:" + offset);
  26. // 上方位置 = 目標區塊.位移().上方位置
  27. var top = $(target).offset().top;
  28. //console.log("要前往元素的上方位置:" + top);
  29. // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
  30. // parseInt() 將文字轉為數字
  31. $("html").stop().animate({
  32. scrollTop: top - offset
  33. }, parseInt(duration));
  34. }
  35. });
  36. });
  37. // 避免動畫與使用者滾輪衝突
  38. // html 在滾動滾輪時 停止 html 所有效果
  39. $("html").on("mousewheel", function () {
  40. $("html").stop();
  41. });
  42. $(".playbutton").click(function () {
  43. var videosrc = $(this).data("info");
  44. $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
  45. });
  46. $(".btn-close").click(function () {
  47. $('.youtube-video').attr('src', ``);
  48. });
  49. $('#yt-video').on('hidden.bs.modal', function () {
  50. $('.youtube-video').attr('src', ``);
  51. });
  52. $(".banner-slide").slick({
  53. dots: true,
  54. autoplay: true,
  55. arrows: false,
  56. slidesToShow: 1,
  57. slidesToScroll: 1,
  58. autoplaySpeed: 7000,
  59. initialSlide: 0,
  60. infinite: true,
  61. });
  62. $(".violetbeauty_sec01_slide").slick({
  63. slidesToShow: 4,
  64. slidesToScroll: 1,
  65. infinite: true,
  66. // centerMode: true,
  67. arrows: true,
  68. prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
  69. nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
  70. });