Cuando estábamos aprendiendo JS nativo, escribimos un caso de cambio de cuadro de imagen. ¿Aún recuerda qué método se usó para cambiar la barra de navegación y la barra de contenido de forma sincrónica? La creación y adquisición de atributos personalizados es más problemática.También necesitamos usar el ciclo for para atravesar los eventos vinculantes, pero después de aprender jQuery, aunque es solo una entrada, puede completar algunos efectos dinámicos básicos.
Comparemos las partes de implementación de los dos:
JS nativo:
El JS nativo es usar setAttribute para establecer un índice de atributo personalizado al vincular el evento de movimiento del mouse a cada li en un bucle, y luego usar getAttribute para obtener el índice de valor de atributo personalizado vinculado al li al vincular el evento de movimiento, y luego usar la idea exclusiva: matar a otras personas, dejarme a mí mismo y solo dejar la imagen correspondiente al valor del atributo personalizado li
<script>
var lis=document.querySelectorAll('li')
var as=document.querySelectorAll('a')
for(var i=0;i<lis.length;i++){
lis[i].setAttribute('index',i) //设置自定义属性
lis[i].addEventListener('mouseover',function() {
var index=this.getAttribute('index') //获取自定义属性
for(var i=0;i<as.length;i++){
as[i].style.display='none';
}
as[index].style.display='block'
})
}
</script>jQuery:
¡La implementación de jquery será demasiado simple! ! , debido a que tenemos una iteración implícita, no necesitamos el enlace de bucle, use el método index() de jQuery para obtener el valor de índice del li al que se mueve el cursor, y luego use directamente la idea exclusiva de usar el método eq() en el método de filtro para obtener el cursor Mueva la imagen correspondiente al valor del índice, use el método show() de jQuery para mostrarla y luego use el método hide() para ocultar sus hermanos (hermanos)
<script>
$('.map-box li').mouseover(function(){
var index=$(this).index()
$('.img-box a').eq(index).show()
$('.img-box a').eq(index).siblings().hide()
})
</script>Código completo:
<!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>
*{
padding: 0;
margin: 0;
}
.out-box{
box-sizing: border-box;
width: 700px;
height: 500px;
margin: 100px auto;
}
.map-box{
float: left;
box-sizing: border-box;
width: 200px;
height: 500px;
background-color: rgb(129, 129, 129);
}
.img-box{
float: left;
box-sizing: border-box;
width: 500px;
height: 500px;
border: 1.5px solid;
border-left: 0;
}
.map-box ul{
width: 200px;
box-sizing: border-box;
}
.map-box ul li{
box-sizing: border-box;
width: 200px;
height: 100px;
background-color: rgb(255, 230, 131);
border: 1.5px solid;
border-bottom: 0;
list-style: none;
text-align: center;
line-height: 100px;
font-size: 27px;
font-weight: 800;
}
.map-box ul li:last-child{
border-bottom:1.5px solid;
}
.map-box ul li:hover{
background-color: rgb(202, 148, 0);
color: aliceblue;
border-color: black;
}
.img-box a{
display: inline-block;
display: none;
}
.img-box img{
width: 498px;
height: 498px;
box-sizing: border-box;
}
</style>
<script src="./jQuery.js"></script>
</head>
<body>
<div class="out-box">
<div class="map-box">
<ul>
<li>文峰塔</li>
<li>羑里城</li>
<li>岳飞庙</li>
<li>殷墟</li>
<li>文字博物馆</li>
</ul>
</div>
<div class="img-box">
<a href="javascript::" class="img1" style="display: block">
<img src="./phpto/wenfeng.jpg" alt="" >
</a>
<a href="javascript::" class="img2">
<img src="./phpto/youli.jpg" alt="">
</a>
<a href="javascript::" class="img3">
<img src="./phpto/yuefei.jpg" alt="">
</a>
<a href="javascript::" class="img4">
<img src="./phpto/yinxu.jpg" alt="">
</a>
<a href="javascript::" class="img5">
<img src="./phpto/wenzi.jpg" alt="">
</a>
</div>
</div>
<script>
$('.map-box li').mouseover(function(){
var index=$(this).index()
$('.img-box a').eq(index).show()
$('.img-box a').eq(index).siblings().hide()
})
</script>
</body>
</html>