Most-favorites/goto.js

$("*").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();
});

// gotop下滑效果
$(".arrow").hide();
$(window).scroll(function () {
  var y = window.scrollY;

  if (y > 500) {
    $(".arrow").show();
  } else {
    $(".arrow").hide();
  }

});
console.log(28);
//  $('.nav-item2').click(function(){
// $(this).toggleClass('after-nav')
//  })

$(document).ready(function () {

  $.ajax({
    method: "GET",
    url: "designer4.json",
    dataType: "json",
  })

    .done(function (msg) {
      var desBanner = '';
      var MobBanner = '';
      var bodyBannerDes = '';
      console.log(msg);
      var res = msg.length;
      console.log(res);
      const limit = res;
      var arrIndex = Math.floor(Math.random() * msg.length);
      console.log(arrIndex);
      console.log(msg[arrIndex].Designerimg);

      desBanner += ' \
              <div class="banner-des row vertical align-items-end px-0 mx-0">\
                <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
                <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
                </div>\
                <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
                    <div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
                    <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
                </div>\
                <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
                    <img class="img-fluid" src="'+ msg[arrIndex].Designerimg + '" alt="">\
                </div>\
            </div>';

      MobBanner += ' \
              <div class="banner-m row vertical align-items-end px-0 mx-0">\
              <div class="bannerm-0 col-12 my-5 px-0">\
              <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
              </div>\
              <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
                  <img class="img-fluid" src="'+ msg[arrIndex].Designerimg + '" alt="">\
              </div>\
              <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start py-3">\
                  <div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
                  <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
              </div>\
            </div>';

      bodyBannerDes += ' \
            <img class="banner-img img-fluid" id="img_id"  src="'+ msg[arrIndex].workimg[arrIndex].img + '" alt="">\
           ';



      $('.banner-des').html(desBanner);
      $('.banner-m').html(MobBanner);
      $('#bannerdes-img').html(bodyBannerDes);
      // var test = msg[0].newstext1;

      // $('#jsontest').append(test);
    });



});

// 點選該設計師，導至其對應id的參數網址

$('#278').click(function () {
  console.log(1);
  window.location.href = `./about/index.html?id=278`;
});
$('#507').click(function () {
  console.log(2);
  window.location.href = `./about/index.html?id=507`;
});


$('#423').click(function () {
  console.log(3);
  window.location.href = `./about/index.html?id=423`;
});

$('#594').click(function () {
  console.log(4);
  window.location.href = `./about/index.html?id=594`;
});

$('#364').click(function () {
  console.log(5);
  window.location.href = `./about/index.html?id=364`;
});
$('#500').click(function () {
  console.log(6);
  window.location.href = `./about/index.html?id=500`;
});

$('#651').click(function () {
  console.log(7);
  window.location.href = `./about/index.html?id=651`;
});

$('#347').click(function () {
  console.log(8);
  window.location.href = `./about/index.html?id=347`;
});

$('#363').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=363`;
});

$('#555').click(function () {
  console.log(10);
  window.location.href = `./about/index.html?id=555`;
});

$('#79').click(function () {
  console.log(11);
  window.location.href = `./about/index.html?id=79`;
});
$('#158').click(function () {
  console.log(12);
  window.location.href = `./about/index.html?id=158`;
});

$('#301').click(function () {
  console.log(13);
  window.location.href = `./about/index.html?id=301`;
});

$('#402').click(function () {
  console.log(14);
  window.location.href = `./about/index.html?id=402`;
});

$('#131').click(function () {
  console.log(15);
  window.location.href = `./about/index.html?id=131`;
});

$('#28').click(function () {
  console.log(16);
  window.location.href = `./about/index.html?id=28`;
});

$('#65').click(function () {
  console.log(17);
  window.location.href = `./about/index.html?id=65`;
});
$('#672').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=672`;
});
$('#438').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=438`;
});
$('#291').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=291`;
});
$('#465').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=465`;
});
$('#436').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=436`;
});
$('#279').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=279`;
});
$('#418').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=418`;
});
$('#385').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=385`;
});
$('#688').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=688`;
});
$('#474').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=474`;
});
$('#505').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=505`;
});
$('#712').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=712`;
});
$('#680').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=680`;
});
$('#705').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=705`;
});
$('#23').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=23`;
});

$('#33').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=33`;
});

$('#491').click(function () {
  console.log(9);
  window.location.href = `./about/index.html?id=491`;
});




$("div.sec01-designer div").sort(function(){
  return Math.random()*10 > 5 ? 1 : -1;
}).each(function(){
  var $t = $(this),
      color = $t.attr("");
  $t.css({backgroundColor: color}).appendTo( $t.parent() );
});