|
|
@@ -1,316 +1,328 @@
|
|
|
$(".sec-01__slider").slick({
|
|
|
- dots: true,
|
|
|
- autoplay: false,
|
|
|
- arrows: false,
|
|
|
-});
|
|
|
+ dots: true,
|
|
|
+ autoplay: false,
|
|
|
+ arrows: false,
|
|
|
+ });
|
|
|
|
|
|
-let result;
|
|
|
-/* $.ajax({
|
|
|
- method: "GET",
|
|
|
- url: "/hhh-home-mb/json/data.json",
|
|
|
- dataType: "json",
|
|
|
-}).done(function (msg) {
|
|
|
- alert(msg);
|
|
|
- result = [...msg];
|
|
|
- console.log(result);
|
|
|
- renderSec00(result);
|
|
|
- renderSec02(result);
|
|
|
- renderSec03(result);
|
|
|
- renderSec06(result);
|
|
|
- renderSec07(result);
|
|
|
- renderSec08(result);
|
|
|
- renderSec09(result);
|
|
|
- renderSec10(result);
|
|
|
- renderSec11(result);
|
|
|
-}); */
|
|
|
-axios.get('http://localhost:8000/genjson').then(({ data }) => {
|
|
|
- //alert(data);
|
|
|
- result = [...data];
|
|
|
- console.log(result);
|
|
|
- renderSec00(result);
|
|
|
- renderSec02(result);
|
|
|
- renderSec03(result);
|
|
|
- renderSec06(result);
|
|
|
- renderSec07(result);
|
|
|
- renderSec08(result);
|
|
|
- renderSec09(result);
|
|
|
- renderSec10(result);
|
|
|
- renderSec11(result);
|
|
|
-});
|
|
|
+ let result;
|
|
|
+/* $.ajax({
|
|
|
+ method: "GET",
|
|
|
+ url: "../json/data.json",
|
|
|
+ dataType: "json",
|
|
|
+ }).done(function (msg) {
|
|
|
+ result = [...msg];
|
|
|
+ renderSec00(result);
|
|
|
+ renderSec02(result);
|
|
|
+ renderSec03(result);
|
|
|
+ renderSec06(result);
|
|
|
+ renderSec07(result);
|
|
|
+ renderSec08(result);
|
|
|
+ renderSec09(result);
|
|
|
+ renderSec10(result);
|
|
|
+ renderSec11(result);
|
|
|
+ renderVideo(result);
|
|
|
+ }); */
|
|
|
|
|
|
-function renderSec00(data) {
|
|
|
- let temp = data[0]['data'];
|
|
|
- //alert(temp.length);
|
|
|
- let str = '';
|
|
|
- for (let i = 0; i < temp.length; i++) {
|
|
|
- console.log(temp[i]['imgUrl']);
|
|
|
- str += `<div class="sec-00__slider-${i + 1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
|
|
|
- }
|
|
|
- $('.sec-00__slider').html(str);
|
|
|
- $(".sec-00__slider").slick({
|
|
|
- dots: false,
|
|
|
- speed: 800,
|
|
|
- autoplay: true,
|
|
|
- });
|
|
|
-}
|
|
|
+ axios.get('https://m3.hhh.com.tw:18686/genjson').then(({ data }) => {
|
|
|
+ //alert(data);
|
|
|
+ result = [...data];
|
|
|
+
|
|
|
+ //console.log(result);
|
|
|
+ renderSec00(result);
|
|
|
+ renderSec02(result);
|
|
|
+ renderSec03(result);
|
|
|
+ renderSec06(result);
|
|
|
+ renderSec07(result);
|
|
|
+ renderSec08(result);
|
|
|
+ renderSec09(result);
|
|
|
+ renderSec10(result);
|
|
|
+ renderSec11(result);
|
|
|
+ renderVideo(result);
|
|
|
+
|
|
|
+ });
|
|
|
|
|
|
-function renderSec02(data) {
|
|
|
- let temp = data[1]['data'];
|
|
|
- let str = '';
|
|
|
- for (let i = 0; i < temp.length; i++) {
|
|
|
- console.log(temp[i]['imgUrl']);
|
|
|
- str += `<div class="sec-02__slider-${i + 1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
|
|
|
- }
|
|
|
- $('.sec-02__slider').html(str);
|
|
|
- $(".sec-02__slider").slick({
|
|
|
- dots: false,
|
|
|
- autoplay: true,
|
|
|
- arrows: true,
|
|
|
- fade: true,
|
|
|
- autoplaySpeed: 4000,
|
|
|
- });
|
|
|
-}
|
|
|
+ function renderSec00(data) {
|
|
|
+ let temp = data[0]['data'];
|
|
|
+ renderBannerStr('sec-00__slider', temp);
|
|
|
+ $(".sec-00__slider").slick({
|
|
|
+ dots: false,
|
|
|
+ speed: 800,
|
|
|
+ autoplay: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderSec02(data) {
|
|
|
+ let temp = data[1]['data'];
|
|
|
+ renderBannerStr('sec-02__slider', temp);
|
|
|
+ let str = '';
|
|
|
+ $(".sec-02__slider").slick({
|
|
|
+ dots: false,
|
|
|
+ autoplay: true,
|
|
|
+ arrows: true,
|
|
|
+ fade: true,
|
|
|
+ autoplaySpeed: 4000,
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
-function renderSec03(data) {
|
|
|
- let randomIdx = Math.floor(Math.random() * 3);
|
|
|
- const ran = $('.sec-03__tabdiv .nav-item-link').eq(randomIdx);
|
|
|
- const ranDiv = $('#pills-tabContent .tab-pane').eq(randomIdx);
|
|
|
- ran.addClass('active');
|
|
|
- ranDiv.addClass('active');
|
|
|
- ranDiv.addClass('show');
|
|
|
- let temp = data[2]['data'];
|
|
|
- for (let i = 0; i < temp.length; i++) {
|
|
|
- if (temp[i]["tab"] == '最夯設計') {
|
|
|
- let str = '';
|
|
|
- let sub = temp[i]["data"];
|
|
|
- for (let j = 0; j < sub.length; j++) {
|
|
|
- str += `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
|
|
|
+ function renderBannerStr(sec, data) {
|
|
|
+ let str = '';
|
|
|
+ for(let i = 0; i < data.length; i++){
|
|
|
+ str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['imgUrl']}');"></div>`
|
|
|
+ }
|
|
|
+ console.log(str);
|
|
|
+ $(`.${sec}`).html(str);
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderSec03(data) {
|
|
|
+ let randomIdx = Math.floor(Math.random()*3);
|
|
|
+ const ran = $('.sec-03__tabdiv .nav-item-link').eq(randomIdx);
|
|
|
+ const ranDiv = $('#pills-tabContent .tab-pane').eq(randomIdx);
|
|
|
+ ran.addClass('active');
|
|
|
+ ranDiv.addClass('active');
|
|
|
+ ranDiv.addClass('show');
|
|
|
+ let temp = data[2]['data'];
|
|
|
+ for(let i = 0; i < temp.length; i++){
|
|
|
+ if(temp[i]["tab"] == '最夯設計'){
|
|
|
+ let str = '';
|
|
|
+ let sub = temp[i]["data"];
|
|
|
+ for(let j = 0; j < sub.length; j++){
|
|
|
+ str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
|
|
|
<div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
|
|
|
<p class="mt-2 pe-2">${sub[j]['description']}</p>
|
|
|
</div>`
|
|
|
- }
|
|
|
- $('#pills-hot .tabpar').html(str);
|
|
|
- }
|
|
|
- if (temp[i]["tab"] == '影音實錄') {
|
|
|
- let str = '';
|
|
|
- let sub = temp[i]["data"];
|
|
|
- for (let j = 0; j < sub.length; j++) {
|
|
|
- str += `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
|
|
|
- <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""><img class="tabpar__card__play" src="images/Play-Button.png"></div>
|
|
|
+ }
|
|
|
+ $('#pills-hot .tabpar').html(str);
|
|
|
+ }
|
|
|
+ if(temp[i]["tab"] == '影音實錄'){
|
|
|
+ let str = '';
|
|
|
+ let sub = temp[i]["data"];
|
|
|
+ for(let j = 0; j < sub.length; j++){
|
|
|
+ str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
|
|
|
+ <div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""><img class="tabpar__card__play" src="images/Play-Button.webp"></div>
|
|
|
<p class="mt-2 pe-2">${sub[j]['description']}</p>
|
|
|
</div>`
|
|
|
- }
|
|
|
- $('#pills-video .tabpar').html(str);
|
|
|
- }
|
|
|
- if (temp[i]["tab"] == '專欄文章') {
|
|
|
- let str = '';
|
|
|
- let sub = temp[i]["data"];
|
|
|
- for (let j = 0; j < sub.length; j++) {
|
|
|
- str += `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
|
|
|
+ }
|
|
|
+ $('#pills-video .tabpar').html(str);
|
|
|
+ }
|
|
|
+ if(temp[i]["tab"] == '專欄文章'){
|
|
|
+ let str = '';
|
|
|
+ let sub = temp[i]["data"];
|
|
|
+ for(let j = 0; j < sub.length; j++){
|
|
|
+ str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}')";>
|
|
|
<div class="tabpar__card__imgfr"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
|
|
|
<p class="mt-2 pe-2">${sub[j]['description']}</p>
|
|
|
</div>`
|
|
|
+ }
|
|
|
+ $('#pills-blog .tabpar').html(str);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const cardText = document.querySelectorAll('.tabpar__card p');
|
|
|
+ cardText.forEach((item, i) => {
|
|
|
+ let len = item.textContent.length;
|
|
|
+ if(len > 20) {
|
|
|
+ let str = item.textContent.substring(0, 20) + '...';
|
|
|
+ item.textContent = str;
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- $('#pills-blog .tabpar').html(str);
|
|
|
- }
|
|
|
- }
|
|
|
- const cardText = document.querySelectorAll('.tabpar__card p');
|
|
|
- cardText.forEach((item, i) => {
|
|
|
- let len = item.textContent.length;
|
|
|
- if (len > 20) {
|
|
|
- let str = item.textContent.substring(0, 20) + '...';
|
|
|
- item.textContent = str;
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-function renderSec06(data) {
|
|
|
- let temp = data[3]['data'];
|
|
|
- let str = '';
|
|
|
- for (let i = 0; i < temp.length; i++) {
|
|
|
- console.log(temp[i]['imgUrl']);
|
|
|
- if (i === 0) {
|
|
|
- str += `<div class="carousel-item active" onclick="window.open('${temp[i]['link']}');"
|
|
|
+ function renderSec06(data) {
|
|
|
+ let temp = data[3]['data'];
|
|
|
+ let str = '';
|
|
|
+ for(let i = 0; i < temp.length; i++){
|
|
|
+ if(i === 0) {
|
|
|
+ str+= `<div class="carousel-item active" onclick="window.open('${temp[i]['link']}');"
|
|
|
style="background-image: url('${temp[i]['imgUrl']}');">
|
|
|
</div>`
|
|
|
- } else {
|
|
|
- str += `<div class="carousel-item" onclick="window.open('${temp[i]['link']}');"
|
|
|
+ } else {
|
|
|
+ str+= `<div class="carousel-item" onclick="window.open('${temp[i]['link']}');"
|
|
|
style="background-image: url('${temp[i]['imgUrl']}');">
|
|
|
</div>`
|
|
|
- }
|
|
|
- }
|
|
|
- $('.sec-06 .carousel-inner').html(str);
|
|
|
-
|
|
|
-}
|
|
|
-function renderSec07(data) {
|
|
|
- let temp = data[4]['data'];
|
|
|
- let str = '';
|
|
|
- for (let i = 0; i < temp.length; i++) {
|
|
|
- console.log(temp[i]['imgUrl']);
|
|
|
- str += `
|
|
|
- <div class="sec-07__slider-${i + 1} sec-07__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $('.sec-06 .carousel-inner').html(str);
|
|
|
+
|
|
|
+ }
|
|
|
+ function renderSec07(data) {
|
|
|
+ let temp = data[4]['data'];
|
|
|
+ let str = '';
|
|
|
+ for(let i = 0; i < temp.length; i++){
|
|
|
+ str+= `
|
|
|
+ <div class="sec-07__slider-${i+1} sec-07__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
|
|
|
<div class="sec-07__imgfr mb-2"><img src="${temp[i]['imgUrl']}" alt=""></div>
|
|
|
<p class="sec-07__cardtxt">${temp[i]['description']}</p>
|
|
|
</div>`
|
|
|
- }
|
|
|
- $('.sec-07__slider').html(str);
|
|
|
- $(".sec-07__slider").slick({
|
|
|
- arrows: false,
|
|
|
- slidesToShow: 1,
|
|
|
- centerMode: true,
|
|
|
- infinite: false,
|
|
|
- dots: true,
|
|
|
- centerPadding: '12px'
|
|
|
- });
|
|
|
- const cardText = document.querySelectorAll('.sec-07__cardtxt');
|
|
|
- cardText.forEach((item, i) => {
|
|
|
- let len = item.textContent.length;
|
|
|
- if (len > 20) {
|
|
|
- let str = item.textContent.substring(0, 25) + '...';
|
|
|
- item.textContent = str;
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-function renderSec08(data) {
|
|
|
- let temp = data[5]['data'];
|
|
|
- let str = '';
|
|
|
- for (let i = 0; i < temp.length; i++) {
|
|
|
- str += `<div class="sec-08__slider-${i + 1} mx-1" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');"></div>`
|
|
|
- }
|
|
|
- $('.sec-08__slider').html(str);
|
|
|
- $(".sec-08__slider").slick({
|
|
|
- arrows: false,
|
|
|
- slidesToShow: 1,
|
|
|
- centerMode: true,
|
|
|
- infinite: false,
|
|
|
- dots: false,
|
|
|
- centerPadding: '12px'
|
|
|
- });
|
|
|
-}
|
|
|
-function renderSec09(data) {
|
|
|
- let temp = data[6]['data'];
|
|
|
- let str = '';
|
|
|
- for (let i = 0; i < temp.length; i++) {
|
|
|
- str += `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
|
|
|
+ }
|
|
|
+ $('.sec-07__slider').html(str);
|
|
|
+ $(".sec-07__slider").slick({
|
|
|
+ arrows: false,
|
|
|
+ slidesToShow: 1,
|
|
|
+ centerMode: true,
|
|
|
+ infinite: false,
|
|
|
+ dots: true,
|
|
|
+ centerPadding: '12px'
|
|
|
+ });
|
|
|
+ const cardText = document.querySelectorAll('.sec-07__cardtxt');
|
|
|
+ cardText.forEach((item, i) => {
|
|
|
+ let len = item.textContent.length;
|
|
|
+ if(len > 20) {
|
|
|
+ let str = item.textContent.substring(0, 25) + '...';
|
|
|
+ item.textContent = str;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ function renderSec08(data) {
|
|
|
+ let temp = data[5]['data'];
|
|
|
+ let str = '';
|
|
|
+ for(let i = 0; i < temp.length; i++){
|
|
|
+ str+= `<div class="sec-08__slider-${i+1} mx-1 slide-item" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');"></div>`
|
|
|
+ }
|
|
|
+ $('.sec-08__slider').html(str);
|
|
|
+ $(".sec-08__slider").slick({
|
|
|
+ autoplay: true,
|
|
|
+ autoplaySpeed: 8000,
|
|
|
+ arrows: false,
|
|
|
+ slidesToShow: 1,
|
|
|
+ centerMode: true,
|
|
|
+ infinite: true,
|
|
|
+ dots: false,
|
|
|
+ centerPadding: '12px'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function renderSec09(data) {
|
|
|
+ let temp = data[6]['data'];
|
|
|
+ let str = '';
|
|
|
+ for(let i = 0; i < temp.length; i++){
|
|
|
+ str+= `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
|
|
|
<div class="sec-09__card__imgfr"><img src="${temp[i]['imgUrl']}" alt=""></div>
|
|
|
<p>${temp[i]['description']}</p>
|
|
|
</div>`
|
|
|
- }
|
|
|
- $('.sec-09__cardgrp').html(str);
|
|
|
-}
|
|
|
-function renderSec10(data) {
|
|
|
- let temp = data[7]['data'];
|
|
|
- let str = '';
|
|
|
- for (let i = 0; i < temp.length; i++) {
|
|
|
- str += `<div class="sec-10__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
|
|
|
- <div class="sec-10__slider-${i + 1} mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
|
|
|
- <p class="sec-10__cardtxt">${temp[i]['description']}</p>
|
|
|
- </div>`
|
|
|
- }
|
|
|
- $('.sec-10__slider').html(str);
|
|
|
- $(".sec-10__slider").slick({
|
|
|
- arrows: false,
|
|
|
- slidesToShow: 1,
|
|
|
- centerMode: true,
|
|
|
- infinite: false,
|
|
|
- dots: false,
|
|
|
- centerPadding: '12px'
|
|
|
- });
|
|
|
-}
|
|
|
-function renderSec11(data) {
|
|
|
- let temp = data[8]['data'];
|
|
|
- let str = '';
|
|
|
- for (let i = 0; i < temp.length; i++) {
|
|
|
- str += `<div class="sec-11__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
|
|
|
- <div class="sec-11__slider-${i + 1} mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
|
|
|
- <p class="sec-11__cardtxt">${temp[i]['description']}</p>
|
|
|
- </div>`
|
|
|
- }
|
|
|
- $('.sec-11__slider').html(str);
|
|
|
- $(".sec-11__slider").slick({
|
|
|
- arrows: false,
|
|
|
- slidesToShow: 1,
|
|
|
- centerMode: true,
|
|
|
- infinite: false,
|
|
|
- dots: false,
|
|
|
- centerPadding: '12px'
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-window.addEventListener('scroll', fixedOnScroll);
|
|
|
-
|
|
|
-const navbar = document.querySelector('.navbar-main');
|
|
|
-
|
|
|
-function fixedOnScroll() {
|
|
|
- const sticky = 110;
|
|
|
- if (window.pageYOffset >= sticky) {
|
|
|
- navbar.classList.add('sticky');
|
|
|
- } else {
|
|
|
- navbar.classList.remove('sticky');
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-$('.navbar-toggler').click(function () {
|
|
|
- $(".sec-menu").css('display', 'block');
|
|
|
- $(".wholeBody").css('overflow-y', 'hidden');
|
|
|
-});
|
|
|
-
|
|
|
-$('.navbar-back').click(function () {
|
|
|
- $(".sec-menu").css('display', 'none');
|
|
|
- $(".wholeBody").css('overflow-y', 'scroll');
|
|
|
-});
|
|
|
-
|
|
|
-$('.subexpand').click(function () {
|
|
|
- $(this).parent().next().toggleClass('show');
|
|
|
- $(this).parent().toggleClass('show');
|
|
|
-});
|
|
|
-
|
|
|
-$('.navbar-search').click(function () {
|
|
|
- $(".sec-search").css('display', 'block');
|
|
|
- $(".wholeBody").css('overflow-y', 'hidden');
|
|
|
-})
|
|
|
-
|
|
|
-$('.navbar-backs').click(function () {
|
|
|
- $(".sec-search").css('display', 'none');
|
|
|
- $(".wholeBody").css('overflow-y', 'scroll');
|
|
|
-});
|
|
|
-
|
|
|
-$('.navbar-back-fav').click(function () {
|
|
|
- $(".sec-favor").css('display', 'none');
|
|
|
-})
|
|
|
+ }
|
|
|
+ $('.sec-09__cardgrp').html(str);
|
|
|
+ $(".sec-09__cardgrp").slick({
|
|
|
+ arrows: false,
|
|
|
+ slidesToShow: 2,
|
|
|
+ slidesToScroll: 1,
|
|
|
+ infinite: true,
|
|
|
+ dots: false,
|
|
|
+ centerPadding: '10px'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function renderSec10(data) {
|
|
|
+ let temp = data[7]['data'];
|
|
|
+ renderRecStr('sec-10', temp);
|
|
|
+ }
|
|
|
+ function renderSec11(data) {
|
|
|
+ let temp = data[8]['data'];
|
|
|
+ renderRecStr('sec-11', temp);
|
|
|
+ }
|
|
|
|
|
|
-$('#videoModal').on('shown.bs.modal', function () {
|
|
|
- $('#videoModal iframe').attr('src', 'https://www.youtube.com/embed/G7baBXAhC_I?controls=0&autoplay=1&enablejsapi=1&origin=https%3A%2F%2Fm.hhh.com.tw&widgetid=1');
|
|
|
-})
|
|
|
-$('#videoModal').on('hidden.bs.modal', function () {
|
|
|
- $('#videoModal iframe').removeAttr('src');
|
|
|
-});
|
|
|
+ function renderRecStr(sec, data) {
|
|
|
+ let str = '';
|
|
|
+ for(let i = 0; i < data.length; i++){
|
|
|
+ if(data[i].video == 'true') {
|
|
|
+ str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
|
|
|
+ <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"><img class="${sec}__card__play" src="images/Play-Button.webp"></div>
|
|
|
+ <p class="${sec}__cardtxt">${data[i]['description']}</p>
|
|
|
+ </div>`;
|
|
|
+ } else {
|
|
|
+ str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
|
|
|
+ <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');"></div>
|
|
|
+ <p class="${sec}__cardtxt">${data[i]['description']}</p>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $(`.${sec}__slider`).html(str);
|
|
|
+ $(`.${sec}__slider`).slick({
|
|
|
+ arrows: false,
|
|
|
+ slidesToShow: 1,
|
|
|
+ centerMode: true,
|
|
|
+ infinite: false,
|
|
|
+ dots: false,
|
|
|
+ centerPadding: '12px'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function renderVideo(data) {
|
|
|
+ let temp = data[9];
|
|
|
+ $('.sec-05__video__txt').text(temp['title']);
|
|
|
+ $('.sec-05__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
|
|
|
+ $('#videoModal').on('shown.bs.modal', function () {
|
|
|
+ $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&enablejsapi=1&origin=https%3A%2F%2Fm.hhh.com.tw&widgetid=1`);
|
|
|
+ });
|
|
|
+ $('#videoModal').on('hidden.bs.modal', function () {
|
|
|
+ $('#videoModal iframe').removeAttr('src');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ window.addEventListener('scroll', fixedOnScroll);
|
|
|
+
|
|
|
+ const navbar = document.querySelector('.navbar-main');
|
|
|
+
|
|
|
+ function fixedOnScroll() {
|
|
|
+ const sticky = 110;
|
|
|
+ if(window.pageYOffset >= sticky){
|
|
|
+ navbar.classList.add('sticky');
|
|
|
+ } else {
|
|
|
+ navbar.classList.remove('sticky');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ $('.navbar-toggler').click(function(){
|
|
|
+ $(".sec-menu").css('display', 'block');
|
|
|
+ $(".wholeBody").css('overflow-y', 'hidden');
|
|
|
+ $('.sec-menu-block').addClass('slidein');
|
|
|
+ $('.sec-menu-block').removeClass('slideout');
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.navbar-back').click(function(){
|
|
|
+ $(".sec-menu").css('display', 'none');
|
|
|
+ $(".wholeBody").css('overflow-y', 'scroll');
|
|
|
+ $('.sec-menu-block').removeClass('slidein');
|
|
|
+ $('.sec-menu-block').addClass('slideout');
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.subexpand').click(function(){
|
|
|
+ $(this).parent().next().toggleClass('show');
|
|
|
+ $(this).parent().toggleClass('show');
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.navbar-search').click(function(){
|
|
|
+ $(".sec-search").css('display', 'block');
|
|
|
+ $(".wholeBody").css('overflow-y', 'hidden');
|
|
|
+ })
|
|
|
+
|
|
|
+ $('.navbar-backs').click(function(){
|
|
|
+ $(".sec-search").css('display', 'none');
|
|
|
+ $(".wholeBody").css('overflow-y', 'scroll');
|
|
|
+ });
|
|
|
|
|
|
-$('.btn-gotop').click(function () {
|
|
|
- $('html, body').animate({
|
|
|
- scrollTop: 0
|
|
|
- }, 500)
|
|
|
-});
|
|
|
+ $('.navbar-back-fav').click(function(){
|
|
|
+ $(".sec-favor").css('display', 'none');
|
|
|
+ })
|
|
|
|
|
|
-$(window).scroll(function () {
|
|
|
- if ($(this).scrollTop() > 500) {
|
|
|
- $('.fixed-btn').fadeIn(222);
|
|
|
- } else {
|
|
|
- $('.fixed-btn').stop().fadeOut(222);
|
|
|
- }
|
|
|
-}).scroll();
|
|
|
+ $('.btn-gotop').click(function () {
|
|
|
+ $('html, body').animate({
|
|
|
+ scrollTop: 0
|
|
|
+ }, 500)
|
|
|
+ });
|
|
|
|
|
|
+ $(window).scroll(function() {
|
|
|
+ if ( $(this).scrollTop() > 500 ){
|
|
|
+ $('.fixed-btn').fadeIn(222);
|
|
|
+ } else {
|
|
|
+ $('.fixed-btn').stop().fadeOut(222);
|
|
|
+ }
|
|
|
+ }).scroll();
|
|
|
+
|
|
|
const searchBtn = document.querySelector('.searchBtn');
|
|
|
const searchBar = document.querySelector('.searchBar');
|
|
|
const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
|
|
|
searchBtn.addEventListener('click', search);
|
|
|
searchBar.addEventListener('keyup', pressSearch);
|
|
|
function search() {
|
|
|
- console.log(searchBar.value);
|
|
|
- if (searchBar.value == '') {
|
|
|
+ if(searchBar.value == '') {
|
|
|
window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
|
|
|
} else {
|
|
|
window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
|
|
|
- console.log(`https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -322,72 +334,71 @@ function pressSearch(e) {
|
|
|
}
|
|
|
|
|
|
searchHotLink.forEach((item, i) => {
|
|
|
- console.log(item.textContent);
|
|
|
- item.addEventListener('click', function () {
|
|
|
+ item.addEventListener('click', function() {
|
|
|
window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
|
|
|
})
|
|
|
})
|
|
|
|
|
|
-//jQuery time
|
|
|
+ //jQuery time
|
|
|
var current_fs, next_fs, previous_fs; //fieldsets
|
|
|
var left, opacity, scale; //fieldset properties which we will animate
|
|
|
var animating; //flag to prevent quick multi-click glitches
|
|
|
|
|
|
-$(".next").click(function () {
|
|
|
- if (animating) return false;
|
|
|
- animating = true;
|
|
|
-
|
|
|
- current_fs = $(this).parent().parent();
|
|
|
- next_fs = $(this).parent().parent().next();
|
|
|
-
|
|
|
- //activate next step on progressbar using the index of next_fs
|
|
|
- $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
|
|
|
-
|
|
|
- //show the next fieldset
|
|
|
- next_fs.animate({ opacity: 1 }, {
|
|
|
- step: function (now, mx) {
|
|
|
- //as the opacity of current_fs reduces to 0 - stored in "now"
|
|
|
- //1. scale current_fs down to 80%
|
|
|
- scale = 0 + (1 + now) * .5;
|
|
|
- //2. bring next_fs from the right(50%)
|
|
|
- left = (now * 50) + "%";
|
|
|
- //3. increase opacity of next_fs to 1 as it moves in
|
|
|
- opacity = 0 + now;
|
|
|
- next_fs.css({
|
|
|
- 'transform': 'scale(' + scale + ')',
|
|
|
+$(".next").click(function(){
|
|
|
+ if(animating) return false;
|
|
|
+ animating = true;
|
|
|
+
|
|
|
+ current_fs = $(this).parent().parent();
|
|
|
+ next_fs = $(this).parent().parent().next();
|
|
|
+
|
|
|
+ //activate next step on progressbar using the index of next_fs
|
|
|
+ $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
|
|
|
+
|
|
|
+ //show the next fieldset
|
|
|
+ next_fs.animate({opacity: 1}, {
|
|
|
+ step: function(now, mx) {
|
|
|
+ //as the opacity of current_fs reduces to 0 - stored in "now"
|
|
|
+ //1. scale current_fs down to 80%
|
|
|
+ scale = 0 + (1 + now) * .5 ;
|
|
|
+ //2. bring next_fs from the right(50%)
|
|
|
+ left = (now * 50)+"%";
|
|
|
+ //3. increase opacity of next_fs to 1 as it moves in
|
|
|
+ opacity = 0 + now;
|
|
|
+ next_fs.css({
|
|
|
+ 'transform': 'scale('+scale+')',
|
|
|
});
|
|
|
- next_fs.css({ 'opacity': opacity });
|
|
|
- },
|
|
|
- duration: 400,
|
|
|
- complete: function () {
|
|
|
- next_fs.show();
|
|
|
- animating = false;
|
|
|
- },
|
|
|
- //this comes from the custom easing plugin
|
|
|
- easing: 'easeInOutBack'
|
|
|
- });
|
|
|
- //hide the current fieldset with style
|
|
|
- current_fs.animate({ opacity: 0 }, {
|
|
|
- step: function (now, mx) {
|
|
|
- //as the opacity of current_fs reduces to 0 - stored in "now"
|
|
|
- //1. scale current_fs down to 80%
|
|
|
- scale = 1 - (1 - now) * 0.2;
|
|
|
- //2. bring next_fs from the right(50%)
|
|
|
- left = (now * 50) + "%";
|
|
|
- //3. increase opacity of next_fs to 1 as it moves in
|
|
|
- opacity = 1 - now;
|
|
|
- current_fs.css({
|
|
|
- 'transform': 'scale(' + scale + ')',
|
|
|
+ next_fs.css({'opacity': opacity});
|
|
|
+ },
|
|
|
+ duration: 400,
|
|
|
+ complete: function(){
|
|
|
+ next_fs.show();
|
|
|
+ animating = false;
|
|
|
+ },
|
|
|
+ //this comes from the custom easing plugin
|
|
|
+ easing: 'easeInOutBack'
|
|
|
+ });
|
|
|
+ //hide the current fieldset with style
|
|
|
+ current_fs.animate({opacity: 0}, {
|
|
|
+ step: function(now, mx) {
|
|
|
+ //as the opacity of current_fs reduces to 0 - stored in "now"
|
|
|
+ //1. scale current_fs down to 80%
|
|
|
+ scale = 1 - (1 - now) * 0.2;
|
|
|
+ //2. bring next_fs from the right(50%)
|
|
|
+ left = (now * 50)+"%";
|
|
|
+ //3. increase opacity of next_fs to 1 as it moves in
|
|
|
+ opacity = 1 - now;
|
|
|
+ current_fs.css({
|
|
|
+ 'transform': 'scale('+scale+')',
|
|
|
});
|
|
|
- next_fs.css({ 'opacity': opacity });
|
|
|
- },
|
|
|
- duration: 400,
|
|
|
- complete: function () {
|
|
|
- current_fs.hide();
|
|
|
- animating = false;
|
|
|
- },
|
|
|
- //this comes from the custom easing plugin
|
|
|
- easing: 'easeInOutBack'
|
|
|
- });
|
|
|
+ next_fs.css({'opacity': opacity});
|
|
|
+ },
|
|
|
+ duration: 400,
|
|
|
+ complete: function(){
|
|
|
+ current_fs.hide();
|
|
|
+ animating = false;
|
|
|
+ },
|
|
|
+ //this comes from the custom easing plugin
|
|
|
+ easing: 'easeInOutBack'
|
|
|
+ });
|
|
|
});
|
|
|
-
|
|
|
+
|
