代码: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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ul id="imgList">
<!-- li*20>img[src='./images/image$.jpg'] -->
<li><img src="./images/image1.jpg" alt=""></li>
<li><img src="./images/image2.jpg" alt=""></li>
<li><img src="./images/image3.jpg" alt=""></li>
<li><img src="./images/image4.jpg" alt=""></li>
<li><img src="./images/image5.jpg" alt=""></li>
<li><img src="./images/image6.jpg" alt=""></li>
<li><img src="./images/image7.jpg" alt=""></li>
<li><img src="./images/image8.jpg" alt=""></li>
<li><img src="./images/image9.jpg" alt=""></li>
<li><img src="./images/image10.jpg" alt=""></li>
<li><img src="./images/image11.jpg" alt=""></li>
<li><img src="./images/image12.jpg" alt=""></li>
<li><img src="./images/image13.jpg" alt=""></li>
<li><img src="./images/image14.jpg" alt=""></li>
<li><img src="./images/image15.jpg" alt=""></li>
<li><img src="./images/image16.jpg" alt=""></li>
<li><img src="./images/image17.jpg" alt=""></li>
<li><img src="./images/image18.jpg" alt=""></li>
<li><img src="./images/image19.jpg" alt=""></li>
<li><img src="./images/image20.jpg" alt=""></li>
</ul>
</body>
</html>
<script src="./js/shoufeng.js"></script>
<script>
accordion();
</script>
代码:css部分(index.css)
*{
margin: 0;
padding: 0;
}
#imgList{
width: 1000px;
margin: 40px auto;
overflow: hidden;
}
#imgList>li{
width: 200px;
height: 200px;
list-style: none;
float: left;
position: relative;
overflow: hidden;
border-left: 1px solid rgb(202, 200, 200);
border-bottom: 1px solid rgb(202, 200, 200);
box-sizing: border-box;
}
#imgList>li>img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
代码:js部分(shoufeng.js)
function accordion() {
//设置选中的宽高
var selectedWidth = 300;
var selectedHeight = 380;
//设置默认的宽高
var defaultWidth = 100;
var defaultHeight = 80;
//设置 行 列
var row = 4;
var col = 5;
var imgList = document.getElementById('imgList');
var li = document.querySelectorAll('li');
//设置总的宽
imgList.style.width = selectedWidth + defaultWidth * 4 + 'px';
for (var i = 0; i < li.length; i++) {
//通过循环将每个li 赋予一个新属性index 并赋值 i ;
li[i].setAttribute('index', i);
li[i].onmouseenter = function () {
//this 指向当前被选中的元素 可以获取当前index 的值
var index = this.getAttribute('index');
pitch_on(index);
}
}
//对选中的图片的操作
function pitch_on(index) {
//将下标转化成坐标
//横坐标上的值(x轴)
var x = index % col;
//纵坐标上的值 (y轴)
var y = parseInt(index / col);
//x轴
for (var i = 0; i < col; i++) {
//y轴
for (var j = 0; j < row; j++) {
//将坐标转换成下标 index_ = col * 当前行数(j) + 当前列(i); col 表示总列数
var index_ = col * j + i;
if (x == i && y == j) {
//选中当前 赋予选中的宽高
li[index_].style.width = selectedWidth + 'px';
li[index_].style.height = selectedHeight + 'px';
} else if (x == i) {
//x轴上的相等 默认的高 选中的宽
li[index_].style.width = selectedWidth + 'px';
li[index_].style.height = defaultHeight + 'px';
} else if (y == j) {
//y轴上的相等 默认的宽 选中的高
li[index_].style.width = defaultWidth + 'px';
li[index_].style.height = selectedHeight + 'px';
} else {
//都不相等 默认的宽高
li[index_].style.width = defaultWidth + 'px';
li[index_].style.height = defaultHeight + 'px';
}
}
}
}
//初始化默认为第一个
pitch_on(0);
}