第一种代码实现手风琴
<!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>
* {
margin: 0px;
padding: 0px;
}
.container {
width: 740px;
height: 600px;
}
.demo {
float: left;
width: 130px;
height: 40px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
overflow: hidden;
}
/* 最大的图片 */
.line1 .demo:first-child {
width: 340px;
height: 400px;
}
/* 同一行 */
.line1 .demo {
width: 130px;
height: 400px;
}
/* 同一列 */
.demo:first-child {
width: 340px;
height: 40px;
}
</style>
</head>
<body>
<div class="container">
<!-- <div class="line1">
<div class="demo"><img src="./images/image1.jpg"></div>
<div class="demo"><img src="./images/image2.jpg"></div>
<div class="demo"><img src="./images/image3.jpg"></div>
<div class="demo"><img src="./images/image4.jpg"></div>
</div>
<div class="line2">
<div class="demo"><img src="./images/image5.jpg"></div>
<div class="demo"><img src="./images/image6.jpg"></div>
<div class="demo"><img src="./images/image7.jpg"></div>
<div class="demo"><img src="./images/image8.jpg"></div>
</div>
<div class="line3">
<div class="demo"><img src="./images/image9.jpg"></div>
<div class="demo"><img src="./images/image10.jpg"></div>
<div class="demo"><img src="./images/image11.jpg"></div>
<div class="demo"><img src="./images/image12.jpg"></div>
</div>
<div class="line4">
<div class="demo"><img src="./images/image13.jpg"></div>
<div class="demo"><img src="./images/image14.jpg"></div>
<div class="demo"><img src="./images/image15.jpg"></div>
<div class="demo"><img src="./images/image16.jpg"></div>
</div>
<div class="line5">
<div class="demo"><img src="./images/image17.jpg"></div>
<div class="demo"><img src="./images/image18.jpg"></div>
<div class="demo"><img src="./images/image19.jpg"></div>
<div class="demo"><img src="./images/image20.jpg"></div>
</div> -->
</div>
<script>
var container = document.querySelector(".container")
var str = ''
// 五行
for(var i=1;i<=5;i++) {
str += `<div class="line${i}">`
// 四列
for(var j=1;j<=4;j++) {
// data-r=${i} data-c=${j} 自定义属性
str += `<div class="demo" data-r=${i} data-c=${j} onmouseenter="change()"><img src="./images/image${(i-1)*4+j}.jpg"></div>`
}
str += `</div>`
}
container.innerHTML = str
function change() {
console.log(event.target)
// 获取非标签属性
var row = event.target.getAttribute("data-r")
var col = event.target.getAttribute("data-c")
console.log(row,col);
// 对比找到鼠标悬浮位置的图片
for(var i=1;i<=5;i++) {
var line = document.querySelector(".line"+i)
for(var j=1;j<=4;j++) {
if(row==i&&col==j) {
line.children[j-1].style.width = "340px"
line.children[j-1].style.height = "400px"
}else if(row==i) {
line.children[j-1].style.width = "130px"
line.children[j-1].style.height = "400px"
}else if(col==j) {
line.children[j-1].style.width = "340px"
line.children[j-1].style.height = "40px"
}else {
line.children[j-1].style.width = "130px"
line.children[j-1].style.height = "40px"
}
}
}
}
</script>
</body>
</html>
第二种代码实现手风琴
<!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: 0px;
padding: 0px;
}
.box {
width: 740px;
height: 600px;
border: 1px solid #fff;
}
.demo {
float: left;
width: 130px;
height: 40px;
overflow: hidden;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
/* 最大的 */
.demo:nth-child(1) {
width: 340px;
height: 400px;
}
/* 同一行 */
.demo:nth-child(2),
.demo:nth-child(3),
.demo:nth-child(4) {
width: 130px;
height: 400px;
}
/* 同一列 */
.demo:nth-child(5),
.demo:nth-child(9),
.demo:nth-child(13),
.demo:nth-child(17) {
width: 340px;
height: 40px;
}
</style>
</head>
<body>
<div class="box">
<!-- <div class="demo"><img src="./images/image1.jpg"></div>
<div class="demo"><img src="./images/image2.jpg"></div>
<div class="demo"><img src="./images/image3.jpg"></div>
<div class="demo"><img src="./images/image4.jpg"></div>
<div class="demo"><img src="./images/image5.jpg"></div>
<div class="demo"><img src="./images/image6.jpg"></div>
<div class="demo"><img src="./images/image7.jpg"></div>
<div class="demo"><img src="./images/image8.jpg"></div>
<div class="demo"><img src="./images/image9.jpg"></div>
<div class="demo"><img src="./images/image10.jpg"></div>
<div class="demo"><img src="./images/image11.jpg"></div>
<div class="demo"><img src="./images/image12.jpg"></div>
<div class="demo"><img src="./images/image13.jpg"></div>
<div class="demo"><img src="./images/image14.jpg"></div>
<div class="demo"><img src="./images/image15.jpg"></div>
<div class="demo"><img src="./images/image16.jpg"></div>
<div class="demo"><img src="./images/image17.jpg"></div>
<div class="demo"><img src="./images/image18.jpg"></div>
<div class="demo"><img src="./images/image19.jpg"></div>
<div class="demo"><img src="./images/image20.jpg"></div> -->
</div>
<script>
// 1、把图片渲染到页面上
var box = document.querySelector(".box")
var str = ''
for(var i=1;i<=20;i++) {
str += `<div class="demo" onmouseenter="change(${i})"><img src="./images/image${i}.jpg"></div>`
}
box.innerHTML = str
// 2、监听鼠标悬浮事件 看鼠标碰到的是哪一张图片
function change(i) {
// 计算鼠标所在位置图片的行
var row = Math.ceil(i/4)
// 计算鼠标所在位置图片的列
var col
if(i%4 == 0) {
col = 4
}else {
col = i%4
}
// 3、获取页面上的所有图片
var img = document.querySelectorAll(".demo")
// 循环改变鼠标悬浮位置 所在图片的大小
for(var j=0;j<img.length;j++) {
// i代表鼠标悬浮碰到的图片
if(j==i-1) {
// 大图片
img[j].style.width = "340px"
img[j].style.height = "400px"
}else if(row == Math.ceil((j+1)/4)) {
// 同一行
img[j].style.width = "130px"
img[j].style.height = "400px"
}else if(col==j%4+1) {
// 同一列
img[j].style.width = "340px"
img[j].style.height = "40px"
}else {
// 不在同一行 也不在同一列
img[j].style.width = "130px"
img[j].style.height = "40px"
}
}
}
</script>
</body>
</html>
效果展示