goto.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  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. function funcTest2(){
  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[0].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. // window.setInterval("funcTest2()",5000);
  100. }
  101. window.onload = funcTest2();
  102. // 點選該設計師,導至其對應id的參數網址
  103. $('#278').click(function () {
  104. console.log(1);
  105. window.location.href = `./about/index.html?id=278`;
  106. });
  107. $('#507').click(function () {
  108. console.log(2);
  109. window.location.href = `./about/index.html?id=507`;
  110. });
  111. $('#423').click(function () {
  112. console.log(3);
  113. window.location.href = `./about/index.html?id=423`;
  114. });
  115. $('#594').click(function () {
  116. console.log(4);
  117. window.location.href = `./about/index.html?id=594`;
  118. });
  119. $('#364').click(function () {
  120. console.log(5);
  121. window.location.href = `./about/index.html?id=364`;
  122. });
  123. $('#500').click(function () {
  124. console.log(6);
  125. window.location.href = `./about/index.html?id=500`;
  126. });
  127. $('#651').click(function () {
  128. console.log(7);
  129. window.location.href = `./about/index.html?id=651`;
  130. });
  131. $('#347').click(function () {
  132. console.log(8);
  133. window.location.href = `./about/index.html?id=347`;
  134. });
  135. $('#363').click(function () {
  136. console.log(9);
  137. window.location.href = `./about/index.html?id=363`;
  138. });
  139. $('#555').click(function () {
  140. console.log(10);
  141. window.location.href = `./about/index.html?id=555`;
  142. });
  143. $('#79').click(function () {
  144. console.log(11);
  145. window.location.href = `./about/index.html?id=79`;
  146. });
  147. $('#158').click(function () {
  148. console.log(12);
  149. window.location.href = `./about/index.html?id=158`;
  150. });
  151. $('#301').click(function () {
  152. console.log(13);
  153. window.location.href = `./about/index.html?id=301`;
  154. });
  155. $('#402').click(function () {
  156. console.log(14);
  157. window.location.href = `./about/index.html?id=402`;
  158. });
  159. $('#131').click(function () {
  160. console.log(15);
  161. window.location.href = `./about/index.html?id=131`;
  162. });
  163. $('#28').click(function () {
  164. console.log(16);
  165. window.location.href = `./about/index.html?id=28`;
  166. });
  167. $('#65').click(function () {
  168. console.log(17);
  169. window.location.href = `./about/index.html?id=65`;
  170. });
  171. $('#672').click(function () {
  172. console.log(9);
  173. window.location.href = `./about/index.html?id=672`;
  174. });
  175. $('#438').click(function () {
  176. console.log(9);
  177. window.location.href = `./about/index.html?id=438`;
  178. });
  179. $('#291').click(function () {
  180. console.log(9);
  181. window.location.href = `./about/index.html?id=291`;
  182. });
  183. $('#465').click(function () {
  184. console.log(9);
  185. window.location.href = `./about/index.html?id=465`;
  186. });
  187. $('#436').click(function () {
  188. console.log(9);
  189. window.location.href = `./about/index.html?id=436`;
  190. });
  191. $('#279').click(function () {
  192. console.log(9);
  193. window.location.href = `./about/index.html?id=279`;
  194. });
  195. $('#418').click(function () {
  196. console.log(9);
  197. window.location.href = `./about/index.html?id=418`;
  198. });
  199. $('#385').click(function () {
  200. console.log(9);
  201. window.location.href = `./about/index.html?id=385`;
  202. });
  203. $('#688').click(function () {
  204. console.log(9);
  205. window.location.href = `./about/index.html?id=688`;
  206. });
  207. $('#474').click(function () {
  208. console.log(9);
  209. window.location.href = `./about/index.html?id=474`;
  210. });
  211. $('#505').click(function () {
  212. console.log(9);
  213. window.location.href = `./about/index.html?id=505`;
  214. });
  215. $('#712').click(function () {
  216. console.log(9);
  217. window.location.href = `./about/index.html?id=712`;
  218. });
  219. $('#680').click(function () {
  220. console.log(9);
  221. window.location.href = `./about/index.html?id=680`;
  222. });
  223. $('#705').click(function () {
  224. console.log(9);
  225. window.location.href = `./about/index.html?id=705`;
  226. });
  227. $('#23').click(function () {
  228. console.log(9);
  229. window.location.href = `./about/index.html?id=23`;
  230. });
  231. $('#33').click(function () {
  232. console.log(9);
  233. window.location.href = `./about/index.html?id=33`;
  234. });
  235. $('#491').click(function () {
  236. console.log(9);
  237. window.location.href = `./about/index.html?id=491`;
  238. });
  239. // function funcTest(){
  240. // $("div.sec01-designer div").sort(function(){
  241. // return Math.random()*10 > 5 ? 1 : -1;
  242. // },).each(function(){
  243. // var $t = $(this),
  244. // color = $t.attr("");
  245. // $t.css({backgroundColor: color}).appendTo( $t.parent() );
  246. // });
  247. // window.setInterval("funcTest()",5000);
  248. // }
  249. // window.onload = funcTest();