打卡GitHub50天50个前端小项目

码到无能为力

于 2023-01-07 10:57:23 发布

阅读量234

点赞数

文章标签：前端 html javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_53438024/article/details/128588611

版权

day-1（手风琴）

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>Document</title>
</head>
<body>
    <ul>
        <li class="open" style="background-image: url(https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"><p>背景1</p> </li>
        <li style="background-image: url(https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"><p>背景2</p> </li>
        <li style="background-image: url(https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80);"><p>背景3</p> </li>
        <li style="background-image: url(https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80);"><p>背景4</p> </li>
    </ul>
   
</body>
</html>

CSS块

*{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            height: 100vh;
            background-image: url(https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80) ;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin: 0;
            background-size: cover;

        }
        ul{
            display: block;
            width: 800px;
            height: 400px;
            border-radius: 30px;
            overflow: hidden;
        }
        li{
            width: 80px;
            height: 100%;
            float: left;
            background-size:cover;
            transition: .5s;
            cursor: pointer;
            border-radius: 20px;
            overflow: hidden;

            
        }
        li p{
            /* position: absolute; */
            width: 80px;
            height: 100px;
            background-color: rgba(255,255,255,.5);
            color: white;
            font-size: 35px;
            border-radius: 20px;
            /* margin-left: 20px; */
        }
        .open{
            width: 480px;
        }

JS块


        
// --------------------法1----------------------------
        const lis = document.getElementsByTagName('li');
        let showIndex = 0;                              //当前open展开的下标;
        for(let i =0;i<lis.length;i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                for(let j = 0;j<lis.length;j++){
                    if(showIndex === this.index){
                    return ;}
                    lis[j].className = ''
                }
                this.className = 'open'
                showIndex = this.index                  //修改showindex   
                document.body.style.backgroundImage = this.style.backgroundImage;
            }
        }
//-------------------法2---------------------------------
// let showIndex = 0;                              //当前open展开的下标;
        // for(let  i = 0;i<lis.length;++i){
        //     lis[i].index = i;
        //     lis[i].onclick = function(){
        //         if(showIndex === this.index){
        //             return ;
        //         }
        //         //法2  推荐使用 
        //         lis[showIndex].className = '';          // 动态添加下表
        //         this.className = 'open';                //展开点击 的li
        //         showIndex = this.index                  //修改showindex   
        //         document.body.style.backgroundImage = this.style.backgroundImage;
        //     }
        // }
// -----------------法3----------------------------
// const lis = document.querySelectorAll('li');
// lis.forEach(li=>{
//     li.addEventListener('click',()=>{
//         removeActiveClasses()
//         li.classList.add('open')
//         document.body.style.backgroundImage = li.style.backgroundImage
//     })
// })
// function removeActiveClasses(){
//     lis.forEach(li=>{
//         li.classList.remove('open')

//     })
// }