1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- $(".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: 1,
- infinite: true,
- // centerMode: true,
- arrows: true,
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
- });
|