案例三 案例三轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮番图</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } .main_wrapper { width: 605px; margin: 0 auto; } .main { height: 100px; } .news-section { display: flex; height: 342px; /* background-color: orange; */ } .news-section .banner { width: 605px; } .news-section .banner .image-list { height: 298px; } .news-section .banner .image-list img { border-radius: 2px; } .news-section .banner .title-list { height: 44px; display: flex; justify-content: space-around; align-items: center; } .news-section .banner .title-list li { background-color: black; height: 44px; width: 121px; line-height: 44px; text-align: center; } .news-section .banner .title-list li a { color: #B1B2BE; text-decoration: none; } .news-section .banner .title-list .active { background-color: #383838; } .news-section .banner .title-list .active a { color: #F3C258; } </style> </head>
// 获取文字中的ul var UlTitleList = document.querySelector(".title-list") // 获取高亮的元素 var ItemActive = document.querySelector(".active") // 获取图片的内容信息 var UlImgeList = document.querySelector("img") // 当鼠标移入后要改变什么事件 UlTitleList.onmouseover = function (e) { if (e.target.parentElement.classList.contains("item")) { if (ItemActive) ItemActive.classList.remove("active") // 加上高亮效果 e.target.parentElement.classList.add("active") ItemActive = e.target.parentElement setInterval(function(){ },2000) var index = Array.from(this.children).findIndex(function (item) { return item === e.target.parentElement }) UlImgeList.src = `./img/${index + 1}.jpeg` } }
案例四 案例四侧边栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tool-bar{ position: fixed; top: 30%; right: 0; display: flex; flex-direction: column; align-items: center; width: 35px; } .item { position: relative; width: 35px; height: 35px; margin-bottom: 1px; background-color: #7a6e6e; border-radius: 3px 0 0 3px; } .icon { display: inline-block; width: 100%; height: 100%; cursor: pointer; background-repeat: no-repeat; background-size: 50%; background-position: 50% 50%; } .name{ position: absolute; z-index: -1; right: 35px; top: 0px; /* 动态的改变 */ width: 0; height: 35px; line-height: 35px; color: #fff; text-align: center; font-size: 12px; background-color: #7a6e6e; cursor: pointer; border-radius: 3px 0 0 3px; transition: width 0.2s ease; } .item:hover,.item:hover .name{ background-color: #cd1926; } </style> </head> <body> <div class="tool-bar"> <div class="item"> <i class="icon"></i> <div class="name">购物车</div> </div> <div class="item"> <i class="icon"></i> <div class="name">收藏</div> </div> <div class="item"> <i class="icon"></i> <div class="name">限时活动</div> </div> <div class="item"> <i class="icon"></i> <div class="name">大礼包</div> </div> </div>
var iconlist=document.querySelectorAll(".icon") for(var i=0;i<iconlist.length;i++){ var icon=iconlist[i] icon.style.backgroundImage=`url("./img/${i+1}.svg")` } var toolBael=document.querySelector(".tool-bar") console.log(toolBael) toolBael.οnmοuseοver=function(e){ OnmouseoverAndOnmouseOutAll(e,62,100,1) } toolBael.οnmοuseοut=function(e){ OnmouseoverAndOnmouseOutAll(e,0,200,10) } function OnmouseoverAndOnmouseOutAll(e,width,height){ // 执行的功能 if(e.target!==e.currentTarget){ // 什么事 件改变盒子的宽度 if(e.target.classList.contains("item")){ e.target.children[0].style.width=`${width}px` e.target.children[0].style.height=`${height}px` e.target.children[0].style.margin=`${margin}px` }else{ e.target.parentElement.children[1].style.width=`${width}px` e.target.parentElement.children[1].style.height=`${height}px` e.target.parentElement.children[1].style.margin=`${margin}px` } } }
