标签：list after play 特效 title add point remove tle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-family: "Microsoft YaHei", serif; } body, dl, dd, p, h1, h2, h3, h4, h5, h6 { margin: 0; } ol, ul, li { margin: 0; padding: 0; list-style: none; } img { border: none } #wrap{ width: 1080px; height: 350px; margin: 50px auto; } #wrap .nav{ position: relative; width: 100%; height: 40px; background-color: #f5f5f5; line-height: 40px; } #wrap .nav p{ position: absolute; top: 0; left: 0; width: 130px; height: 40px; background-color: #000; color: #fff; text-align: center; } #wrap .nav p::after{ content: ""; } #wrap .nav ul{ box-sizing: border-box; width: 100%; padding-left: 200px; } #wrap .nav ul li{ position: relative; float: left; margin-right: 32px; cursor: pointer; transition: color .3s; } #wrap .nav ul li:hover{ color: #db3a45; } #wrap .nav ul li::after{ position: absolute; left: 0; right: 0; bottom: 0; margin: auto; content: ""; width: 0; height: 2px; background-color: #db3a45; transition: width .3s; } #wrap .nav ul li.active::after{ width: 100%; } #wrap .content{ width: 100%; height: 255px; margin-top: 20px; } #wrap .content>ul{ position: relative; width: 100%; height: 100%; } #wrap .content>ul li.first{ display: none; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #wrap .content>ul li.first.show{ display: block; } #wrap .content>ul li.first ul{ width: 150%; } #wrap .content>ul li.first ul li{ float: left; width: 340px; height: 255px; margin-right: 20px; } </style> </head> <body> <div id="wrap"> <div class="nav"> <p class="title">独家精品策划</p> <ul> <li class="active">全部</li> <li>题目一</li> <li>题目二</li> <li>题目三</li> <li>题目四</li> </ul> </div> <div class="content"> <ul> <li class="first show"> <ul> <!--<li class="second"><img src="img/1.jpg" ></li>--> <!--<li class="second"><img src="img/2.jpg" ></li>--> <!--<li class="second"><img src="img/3.png" ></li>--> </ul> </li> <li class="first"> <ul> <!--<li class="second"><img src="img/1.jpg" ></li>--> <!--<li class="second"><img src="img/2.jpg" ></li>--> <!--<li class="second"><img src="img/3.png" ></li>--> </ul> </li> <li class="first"> <ul> <!--<li class="second"><img src="img/1.jpg" ></li>--> <!--<li class="second"><img src="img/2.jpg" ></li>--> <!--<li class="second"><img src="img/3.png" ></li>--> </ul> </li> <li class="first"> <ul> <!--<li class="second"><img src="img/1.jpg" ></li>--> <!--<li class="second"><img src="img/2.jpg" ></li>--> <!--<li class="second"><img src="img/3.png" ></li>--> </ul> </li> <li class="first"> <ul> <!--<li class="second"><img src="img/1.jpg" ></li>--> <!--<li class="second"><img src="img/1.jpg" ></li>--> <!--<li class="second"><img src="img/1.jpg" ></li>--> </ul> </li> </ul> </div> </div> <script> (function (data) { let aNavLi = document.querySelectorAll("#wrap .nav ul li"); let secondUl = document.querySelectorAll("#wrap .first ul"); let index = 0; // 生成content的内容 for (let i=0;i<data.length;i++) { let thisData = data[i]; let {type, id, src} = thisData; // let type = thisData.type; // let id = thisData.id; // let src = thisData.src; // 从第二个类别开始往后边算，第一个全部没有东西 secondUl[type+1].innerHTML += `<li class="second"><img src="${src}" alt=""></li>`; // 直接把前三张放到第一个类别 if(i<3){ secondUl[0].innerHTML += `<li class="second"><img src="${src}" alt=""></li>` } // switch(type){ // case 0: // secondUl[1].innerHTML += `<li class="second"><img src="${src}" ></li>`; // break; // case 1: // secondUl[2].innerHTML += `<li class="second"><img src="${src}" ></li>`; // break; // case 2: // secondUl[3].innerHTML += `<li class="second"><img src="${src}" ></li>`; // break; // case 3: // secondUl[4].innerHTML += `<li class="second"><img src="${src}" ></li>`; // break; // } } let aFirstLi = document.querySelectorAll("#wrap .first"); for (let i=0,len=aNavLi.length;i<len;i++){ aNavLi[i].onmouseenter = function () { aNavLi[index].classList.remove("active"); aFirstLi[index].classList.remove("show"); index = i; aNavLi[index].classList.add("active"); aFirstLi[index].classList.add("show"); } } })( [ { id:0, src:"img/1.jpg", type:0 }, { id:0, src:"img/2.jpg", type:0 }, { id:0, src:"img/3.png", type:0 }, { id:0, src:"img/3.png", type:1 }, { id:0, src:"img/2.jpg", type:1 }, { id:0, src:"img/1.jpg", type:1 }, { id:0, src:"img/1.jpg", type:2 }, { id:0, src:"img/2.jpg", type:2 }, { id:0, src:"img/3.png", type:2 }, { id:0, src:"img/1.jpg", type:3 }, { id:0, src:"img/2.jpg", type:3 }, { id:0, src:"img/3.png", type:3 } ] ); </script> </body> </html>
标签：list after play 特效 title add point remove tle
原文地址：https://www.cnblogs.com/zhangyu666/p/11480067.html
