手风琴小项目

最新推荐文章于 2024-06-13 02:48:16 发布

李先坤

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量70

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43391261/article/details/127296200

版权

代码：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);

}