var bg = document.querySelector('.item-bg'); var items = document.querySelectorAll('.news_item'); var item = document.querySelector('.news_item'); var mode05Left = document.getElementsByClassName('mode05_slides')[0].getBoundingClientRect().left; function cLog(content) { console.log(content) } $(function () { var aHeight = []; $('.news_item .infoBox').each(function (index, element) { aHeight.push($(this).innerHeight()) }); // $('.news_item .infoBox').css('height',Math.max(...aHeight)); $('.news_item .infoBox').css('height',Math.max.apply(null, aHeight)); }) if($(window).width() > 800) { $('.wrap_mode05').on("mouseover", ".news_item", function (_event, _element) { var x = $(this).offset().left - mode05Left; var y = $(this).offset().top; var width = $(this).outerWidth(); var height = $(this).outerHeight(); $('.item-bg').addClass('active'); $('.news_item').removeClass('active'); $(this).addClass('active'); // $('.news_item').removeClass('active'); bg.style.width = width + 'px'; bg.style.height = height + 'px'; bg.style.transform = 'translateX(' + x + 'px )'; }); $('.wrap_mode05').on("mouseleave", ".news_item", function (_event, _element) { $('.item-bg').removeClass('active'); $('.news_item').removeClass('active'); }) $(window).resize(function () { if( $('.news_item.active').length > 0 ) { mode05Left = document.getElementsByClassName('mode05_slides')[0].getBoundingClientRect().left; var _this = $('.news_item.active'); var x = $(_this).offset().left - mode05Left; var y = $(_this).offset().top; var width = $(_this).outerWidth(); var height = $(_this).outerHeight(); bg.style.transform = 'translateX(' + x + 'px )'; bg.style.width = width + 'px'; bg.style.height = height + 'px'; } }); $('.body_b').scroll(function () { if( $('.news_item.active').length > 0 ){ mode05Left = document.getElementsByClassName('mode05_slides')[0].getBoundingClientRect().left; var _this = $('.news_item.active'); var x = $(_this).offset().left - mode05Left; var y = $(_this).offset().top; var width = $(_this).outerWidth(); var height = $(_this).outerHeight(); bg.style.transform = 'translateX(' + x + 'px )'; bg.style.width = width + 'px'; bg.style.height = height + 'px'; } }); } var mode05_slides = new Swiper('.mode05_slides', { effect: 'coverflow', grabCursor: true, loop: true, centeredSlides: true, keyboard: true, slidesPerView: 3, spaceBetween: 45, speed: 300, // autoplay: { // delay: 3000, // disableOnInteraction: false // }, coverflowEffect: { rotate: 0, stretch: 0, depth: 0, modifier: 3, slideShadows: false }, breakpoints: { 998: { spaceBetween: 45, slidesPerView: 3, centeredSlides: true }, 320: { spaceBetween: 45, slidesPerView: 1, centeredSlides: true } }, simulateTouch: true, navigation: { nextEl: '.news-slider-next', prevEl: '.news-slider-prev' }, pagination: { el: '.news-slider__pagination', clickable: true, type : 'progressbar', }, on: { init: function () { var activeItem = document.getElementsByClassName('mode05_slides')[0].querySelector('.swiper-slide-active'); var sliderItem = activeItem.querySelector('.news_item'); $('.swiper-slide-active .news_item').addClass('active'); var x = sliderItem.getBoundingClientRect().left - mode05Left; var y = sliderItem.getBoundingClientRect().top; var width = sliderItem.getBoundingClientRect().width; var height = sliderItem.getBoundingClientRect().height; $('.item-bg').addClass('active'); bg.style.width = width + 'px'; bg.style.height = height + 'px'; bg.style.transform = 'translateX(' + x + 'px )'; // bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)'; } } }); mode05_slides.on('touchEnd', function () { $('.news_item').removeClass('active'); $('.swiper-slide-active .news_item').addClass('active'); }); mode05_slides.on('slideChange', function () { $('.news_item').removeClass('active'); }); mode05_slides.on('slideChangeTransitionEnd', function () { $('.news_item').removeClass('active'); var activeItem = document.querySelector('.swiper-slide-active'); var sliderItem = activeItem.querySelector('.news_item'); $('.swiper-slide-active .news_item').addClass('active'); var x = document.querySelector('.swiper-slide-active .news_item').getBoundingClientRect().left - mode05Left; var y = document.querySelector('.swiper-slide-active .news_item').getBoundingClientRect().top; /* var width = sliderItem.getBoundingClientRect().width; var height = sliderItem.getBoundingClientRect().height; */ $('.item-bg').addClass('active'); /* bg.style.width = width + 'px'; bg.style.height = height + 'px'; */ bg.style.transform = 'translateX(' + x + 'px )'; // bg.style.transform = 'translateX(' + x + 'px ) translateY(' + y + 'px)'; });