vue给li标签设置鼠标覆盖阴影样式
效果图: 这里鼠标覆盖加深阴影 代码如下: 重点 :class="{‘cover’:coverid==index?‘cover’:’’}" ...
vue中一个标签中含有多个class（其中包含三元表达式）的写法
containerSlideBound.x + containerSlideBound.width) { //需要滑动 var scrollLeft = activeSlideBound.x - containerSlideBound.x container.scrollLeft = scrollLeft; } } //==========news end========== function go() { var elementById = document.getElementById("goToPage").value; if (elementById.length < 1 || elementById == undefined || elementById >3 || elementById == 0) { return; } else if (elementById > 1) { window.location.href = "//www.aliyun.com/sswb/1350367_" + elementById + ".html"; } else { window.location.href = "//www.aliyun.com/sswb/1350367.html"; } }; var h = document.getElementsByClassName("banner-content-top")[0].offsetHeight; var dots = document.querySelectorAll('.click-item'); var text = document.querySelectorAll('.text-box'); var btn = document.querySelectorAll('.ebook-info-item-btn'); var wrap = document.querySelector('.img-min'); var ebookbox = document.querySelectorAll('.img-box-ebook'); for (var i = 0; i < dots.length; i++) { (function (i) { dots[i].onclick = function () { for (var index = 0; index < dots.length; index++) { dots[index].className = 'click-item' text[index].className = 'text-box' btn[index].className = 'ebook-info-item-btn' ebookbox[index].className = 'img-box-ebook' } text[i].className = 'text-box show' btn[i].className = 'ebook-info-item-btn show' dots[i].className = 'click-item actives' ebookbox[i].className = 'img-box-ebook big' if(i == 0){ wrap.style.transform = "translate3d(15px, 0px, 0px)" } if(i == 1){ wrap.style.transform = "translate3d(-40px, 0px, 0px)" } if(i == 2){ wrap.style.transform = "translate3d(-100px, 0px, 0px)" } } })(i); } // 通过js控制当前选择 let selects = document.querySelectorAll('.select'); if(document.getElementsByClassName("detail-list-course")[0]){ var urlw = document.getElementsByClassName("detail-list-course")[0].offsetWidth; } let urlWidth = document.getElementsByClassName("course-url") // console.log(selects); // 找到图片组合 let images = document.querySelector(".course-info-box"); // 循环绑定点击事件 selects.forEach((slt,i) => { slt.addEventListener('click', (e) => { // 获取id let index = i; if(document.getElementsByClassName("course-info-item")[0]){ var w = document.getElementsByClassName("course-info-item")[0].offsetWidth; // 控制样式变化 let deg = w *i images.style.transform = `translate3d(-${deg}px, 0px, 0px)`; } // 找到原select对象、并移出样式 let slt_orgin = document.querySelector('.check'); if(slt_orgin){ slt_orgin.classList.remove('check'); // 当前select对象增加样式 slt.classList.add('check'); } urlWidth[i].style.width = urlw + 'px' }); }); window.onresize = function(){ images.style.transform = `translate3d(0px, 0px, 0px)`; // 找到原select对象、并移出样式 let slt_orgin = document.querySelector('.check'); if(slt_orgin){ slt_orgin.classList.remove('check'); // 当前select对象增加样式 selects[0].classList.add('check'); } urlWidth[0].style.width = urlw + 'px' } let num = 0 // 通过js控制当前选择 let recommendItem = document.querySelectorAll('.recommend-click-items') let texts = document.querySelectorAll('.recommend-list')[0] if(recommendItem){ // 循环绑定点击事件 recommendItem.forEach((slt,i) => { slt.addEventListener('click', (e) => { // 获取id let numbers = 0; if (i == 0){ numbers = 0 }else { numbers = 180 } if(texts){ texts.style.transform=`translate3d(0px, -${numbers}px, 0px)` } // 找到原select对象、并移出样式 let act_orgin = document.querySelector('.rmActives'); if(act_orgin){ act_orgin.classList.remove('rmActives'); // 当前select对象增加样式 slt.classList.add('rmActives'); } }); }); } let relatedSwiper = document.getElementsByClassName('related-course-pagination') let relatedItemLength = document.getElementsByClassName('related-course-itemBox').length if(relatedItemLength<=2){ if(relatedSwiper[0]){ relatedSwiper[0].innerHTML='\n \n' } } if(relatedItemLength>2&&relatedItemLength<=4){ relatedSwiper[0].innerHTML='\n \n \n ' } if(relatedItemLength>4&&relatedItemLength<=6){ relatedSwiper[0].innerHTML='\n \n \n \n ' } let reShowScm = document.querySelectorAll('.related-course-itemBox a') let reClickItem = document.querySelectorAll('.related-course-pagination .swiper-pagination-bullet') for (var i = 0; i < reClickItem.length; i++) { (function (i) { reClickItem[i].onclick = function () { console.log(i) for (var index = 0; index < reClickItem.length; index++) { reClickItem[index].className = 'swiper-pagination-bullet related-pagination-bullet' } reClickItem[i].className = 'swiper-pagination-bullet related-pagination-bullet swiper-pagination-bullet-active' if(i == 0){ document.querySelectorAll(".related-course-box")[0].style.transform = `translate3d(0px, 0px, 0px)` reShowScm.forEach((item,index)=>{ if(index<=2){ if(item.getAttribute('data-back-up')){ item.setAttribute('data-tracker-scm', item.getAttribute('data-back-up')) item.removeAttribute('data-back-up') } }else{ if(item.getAttribute('data-tracker-scm')) { item.setAttribute('data-back-up', item.getAttribute('data-tracker-scm')) item.removeAttribute('data-tracker-scm') } } }) } if(i == 1){ document.querySelectorAll(".related-course-box")[0].style.transform = `translate3d(0px, -190px, 0px)` reShowScm.forEach((item,index)=>{ if(index>2&&index<=4){ if(item.getAttribute('data-back-up')){ item.setAttribute('data-tracker-scm', item.getAttribute('data-back-up')) item.removeAttribute('data-back-up') } }else{ if(item.getAttribute('data-tracker-scm')) { item.setAttribute('data-back-up', item.getAttribute('data-tracker-scm')) item.removeAttribute('data-tracker-scm') } } }) } if(i == 2){ document.querySelectorAll(".related-course-box")[0].style.transform=`translate3d(0px, -380px, 0px)` reShowScm.forEach((item,index)=>{ if(index>4&&index<=6){ if(item.getAttribute('data-back-up')){ item.setAttribute('data-tracker-scm', item.getAttribute('data-back-up')) item.removeAttribute('data-back-up') } }else{ if(item.getAttribute('data-tracker-scm')) { item.setAttribute('data-back-up', item.getAttribute('data-tracker-scm')) item.removeAttribute('data-tracker-scm') } } }) } } })(i); } let ismore = document.querySelectorAll('.activity-card') if(ismore.length > 1){ ismore[1].style.display = "none" }