goto.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. $("*").each(function (index, element) {
  2. // 此元素被點選後執行
  3. $(this).click(function (e) {
  4. // 取得被點選元素的屬性:data-gt-target
  5. var target = $(this).attr("data-gt-target");
  6. var duration = $(this).attr("data-gt-duration");
  7. var offset = $(this).attr("data-gt-offset");
  8. // JS 語法:判斷式
  9. // if (條件) {程式區塊}
  10. // 當條件成立,會執行程式區塊
  11. // 如果 目標有資料 才會執行 { } 內的程式
  12. // 避免出現 undefine (未定義 - 不存在的資料)
  13. if (target) {
  14. //console.log("目標:" + target);
  15. //console.log("時間:" + duration);
  16. //console.log("位移:" + offset);
  17. // 上方位置 = 目標區塊.位移().上方位置
  18. var top = $(target).offset().top;
  19. //console.log("要前往元素的上方位置:" + top);
  20. // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
  21. // parseInt() 將文字轉為數字
  22. $("html").stop().animate({
  23. scrollTop: top - offset
  24. }, parseInt(duration));
  25. }
  26. });
  27. });
  28. // 避免動畫與使用者滾輪衝突
  29. // html 在滾動滾輪時 停止 html 所有效果
  30. $("html").on("mousewheel", function () {
  31. $("html").stop();
  32. });
  33. // gotop下滑效果
  34. $(".arrow").hide();
  35. $(window).scroll(function () {
  36. var y = window.scrollY;
  37. if (y > 500) {
  38. $(".arrow").show();
  39. } else {
  40. $(".arrow").hide();
  41. }
  42. });
  43. console.log(28);
  44. // $('.nav-item2').click(function(){
  45. // $(this).toggleClass('after-nav')
  46. // })
  47. $(document).ready(function () {
  48. $.ajax({
  49. method: "GET",
  50. url: "designer4.json",
  51. dataType: "json",
  52. })
  53. .done(function (msg) {
  54. var desBanner = '';
  55. var MobBanner = '';
  56. var bodyBannerDes = '';
  57. console.log(msg);
  58. var res = msg.length;
  59. console.log(res);
  60. const limit = res;
  61. var arrIndex = Math.floor(Math.random() * msg.length);
  62. console.log(arrIndex);
  63. console.log(msg[arrIndex].Designerimg);
  64. desBanner += ' \
  65. <div class="banner-des row vertical align-items-end px-0 mx-0">\
  66. <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
  67. <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
  68. </div>\
  69. <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
  70. <div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
  71. <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
  72. </div>\
  73. <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
  74. <img class="img-fluid" src="'+ msg[arrIndex].Designerimg + '" alt="">\
  75. </div>\
  76. </div>';
  77. MobBanner += ' \
  78. <div class="banner-m row vertical align-items-end px-0 mx-0">\
  79. <div class="bannerm-0 col-12 my-5 px-0">\
  80. <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
  81. </div>\
  82. <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
  83. <img class="img-fluid" src="'+ msg[arrIndex].Designerimg + '" alt="">\
  84. </div>\
  85. <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start py-3">\
  86. <div class="banner1-1" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
  87. <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
  88. </div>\
  89. </div>';
  90. bodyBannerDes += ' \
  91. <img class="banner-img img-fluid" id="img_id" src="'+ msg[arrIndex].workimg[arrIndex].img + '" alt="">\
  92. ';
  93. $('.banner-des').html(desBanner);
  94. $('.banner-m').html(MobBanner);
  95. $('#bannerdes-img').html(bodyBannerDes);
  96. // var test = msg[0].newstext1;
  97. // $('#jsontest').append(test);
  98. });
  99. });
  100. // 點選該設計師,導至其對應id的參數網址
  101. $('#278').click(function () {
  102. console.log(1);
  103. window.location.href = `./about/index.html?id=278`;
  104. });
  105. $('#507').click(function () {
  106. console.log(2);
  107. window.location.href = `./about/index.html?id=507`;
  108. });
  109. $('#423').click(function () {
  110. console.log(3);
  111. window.location.href = `./about/index.html?id=423`;
  112. });
  113. $('#594').click(function () {
  114. console.log(4);
  115. window.location.href = `./about/index.html?id=594`;
  116. });
  117. $('#364').click(function () {
  118. console.log(5);
  119. window.location.href = `./about/index.html?id=364`;
  120. });
  121. $('#500').click(function () {
  122. console.log(6);
  123. window.location.href = `./about/index.html?id=500`;
  124. });
  125. $('#651').click(function () {
  126. console.log(7);
  127. window.location.href = `./about/index.html?id=651`;
  128. });
  129. $('#347').click(function () {
  130. console.log(8);
  131. window.location.href = `./about/index.html?id=347`;
  132. });
  133. $('#363').click(function () {
  134. console.log(9);
  135. window.location.href = `./about/index.html?id=363`;
  136. });
  137. $('#555').click(function () {
  138. console.log(10);
  139. window.location.href = `./about/index.html?id=555`;
  140. });
  141. $('#79').click(function () {
  142. console.log(11);
  143. window.location.href = `./about/index.html?id=79`;
  144. });
  145. $('#158').click(function () {
  146. console.log(12);
  147. window.location.href = `./about/index.html?id=158`;
  148. });
  149. $('#301').click(function () {
  150. console.log(13);
  151. window.location.href = `./about/index.html?id=301`;
  152. });
  153. $('#402').click(function () {
  154. console.log(14);
  155. window.location.href = `./about/index.html?id=402`;
  156. });
  157. $('#131').click(function () {
  158. console.log(15);
  159. window.location.href = `./about/index.html?id=131`;
  160. });
  161. $('#28').click(function () {
  162. console.log(16);
  163. window.location.href = `./about/index.html?id=28`;
  164. });
  165. $('#65').click(function () {
  166. console.log(17);
  167. window.location.href = `./about/index.html?id=65`;
  168. });
  169. $('#672').click(function () {
  170. console.log(9);
  171. window.location.href = `./about/index.html?id=672`;
  172. });
  173. $('#438').click(function () {
  174. console.log(9);
  175. window.location.href = `./about/index.html?id=438`;
  176. });
  177. $('#291').click(function () {
  178. console.log(9);
  179. window.location.href = `./about/index.html?id=291`;
  180. });
  181. $('#465').click(function () {
  182. console.log(9);
  183. window.location.href = `./about/index.html?id=465`;
  184. });
  185. $('#436').click(function () {
  186. console.log(9);
  187. window.location.href = `./about/index.html?id=436`;
  188. });
  189. $('#279').click(function () {
  190. console.log(9);
  191. window.location.href = `./about/index.html?id=279`;
  192. });
  193. $('#418').click(function () {
  194. console.log(9);
  195. window.location.href = `./about/index.html?id=418`;
  196. });
  197. $('#385').click(function () {
  198. console.log(9);
  199. window.location.href = `./about/index.html?id=385`;
  200. });
  201. $('#688').click(function () {
  202. console.log(9);
  203. window.location.href = `./about/index.html?id=688`;
  204. });
  205. $('#474').click(function () {
  206. console.log(9);
  207. window.location.href = `./about/index.html?id=474`;
  208. });
  209. $('#505').click(function () {
  210. console.log(9);
  211. window.location.href = `./about/index.html?id=505`;
  212. });
  213. $('#712').click(function () {
  214. console.log(9);
  215. window.location.href = `./about/index.html?id=712`;
  216. });
  217. $('#680').click(function () {
  218. console.log(9);
  219. window.location.href = `./about/index.html?id=680`;
  220. });
  221. $('#705').click(function () {
  222. console.log(9);
  223. window.location.href = `./about/index.html?id=705`;
  224. });
  225. $('#23').click(function () {
  226. console.log(9);
  227. window.location.href = `./about/index.html?id=23`;
  228. });
  229. $('#33').click(function () {
  230. console.log(9);
  231. window.location.href = `./about/index.html?id=33`;
  232. });
  233. $('#491').click(function () {
  234. console.log(9);
  235. window.location.href = `./about/index.html?id=491`;
  236. });
  237. $("div.sec01-designer div").sort(function(){
  238. return Math.random()*10 > 5 ? 1 : -1;
  239. }).each(function(){
  240. var $t = $(this),
  241. color = $t.attr("");
  242. $t.css({backgroundColor: color}).appendTo( $t.parent() );
  243. });