$(".gototop").hide(); $(window).scroll(function () { var y = window.scrollY; if (y > 10) { $(".gototop").show(); } else { $(".gototop").hide(); } }); $("*").each(function (index, element) { // 此元素被點選後執行 $(this).click(function (e) { // 取得被點選元素的屬性:data-gt-target var target = $(this).attr("data-gt-target"); var duration = $(this).attr("data-gt-duration"); var offset = $(this).attr("data-gt-offset"); // JS 語法:判斷式 // if (條件) {程式區塊} // 當條件成立,會執行程式區塊 // 如果 目標有資料 才會執行 { } 內的程式 // 避免出現 undefine (未定義 - 不存在的資料) if (target) { //console.log("目標:" + target); //console.log("時間:" + duration); //console.log("位移:" + offset); // 上方位置 = 目標區塊.位移().上方位置 var top = $(target).offset().top; //console.log("要前往元素的上方位置:" + top); // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間) // parseInt() 將文字轉為數字 $("html").stop().animate({ scrollTop: top - offset }, parseInt(duration)); } }); }); // 避免動畫與使用者滾輪衝突 // html 在滾動滾輪時 停止 html 所有效果 $("html").on("mousewheel", function () { $("html").stop(); }); $(".playbutton").click(function () { var videosrc = $(this).data("info"); $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`); }); $(".btn-close").click(function () { $('.youtube-video').attr('src', ``); }); $('#yt-video').on('hidden.bs.modal', function () { $('.youtube-video').attr('src', ``); }); $(".banner-slide").slick({ dots: true, autoplay: true, arrows: false, slidesToShow: 1, slidesToScroll: 1, autoplaySpeed: 7000, initialSlide: 0, infinite: true, }); $(".violetbeauty_sec01_slide").slick({ slidesToShow: 4, slidesToScroll: 3, infinite: true, // centerMode: true, arrows: true, prevArrow: '', nextArrow: '' }); $(".violetbeauty_sec02_slide").slick({ slidesToShow: 3, slidesToScroll: 3, infinite: true, // centerMode: true, arrows: true, prevArrow: '', nextArrow: '' }); $(".learn_more").click(function () { var courseid = $(this).data("info"); // console.log(courseid); $.ajax({ method: "GET", url: "coursecontent.json", dataType: "json", }) .done(function (msg) { // console.log(msg) for (var i = 0; i < msg.length; i++) { if (msg[i].Courseid == courseid) { var CourseContent = ''; console.log(msg[i]); CourseContent = `
${msg[i].CourseTitle}

${msg[i].Coursetext}

` } $('.modal-body').html(CourseContent); } }); }); // facial.html $.ajax({ type: "GET", url: "facial.json", dataType: "json", success: function (res) { let facialList = []; let facialModalList = []; for (let i = 0; i < res.length; i++) { let facialCardContent = `
...
臉部課程

${res[i].time}分鐘

${res[i].title}

${res[i].description}

`; let facialModalContent = ` `; facialList.push(facialCardContent); facialModalList.push(facialModalContent); $('.facial-content-item').html(facialList); $('.facial-modal').html(facialModalList); } }, error: function (err) { console.log('err', err); } }); // massage.html $.ajax({ type: "GET", url: "massage.json", dataType: "json", success: (res) => { let massageList = []; let massageModalList = []; let contentList = [ `
...
身體課程

60分鐘/120分鐘

波動舒活經絡課程

久坐、久站或長期的姿勢不良,讓妳經常腰酸背痛嗎?手技搭配儀器,不再是單純肌肉放鬆,針對氣血循環,功力深厚的技巧,專業的儀器走向,完全放鬆你的身心靈。

`, `
...
身體課程

40分鐘/60分鐘/80分鐘

五行氣穴課程

藉由中醫理論五行學說,透過美容師手勁與技巧將阻塞處舒展,達到通筋通便活絡氣血效應,達到陰陽流暢,全程手技,使用原始原點精油,刺激身體各部位穴點,與一般經絡按摩較不同!愛按摩的你絕不能錯過。

`, `
...
身體課程
半永久熱蠟除毛

擾人的毛髮交給我們,容易悶熱滋生細菌造成異味,妳的救星!熱蠟是所有技術中最低疼痛感,能讓毛髮生長延緩,達到重生毛髮越來越細軟,甚至無毛。

`]; for (let i = 0; i < res.length; i++) { let massageCardContent = `
...
身體課程

${res[i].time}分鐘

${res[i].title}

${res[i].description}

`; let massageModalContent = ` `; massageList.push(massageCardContent); massageModalList.push(massageModalContent); // 合併陣列 const massageArray = contentList.concat(massageList); $('.massage-content-item').html(massageArray); $('.massage-modal').html(massageModalList); } }, error: function (err) { console.log('err', err); } });