用Dom和js两种方法实现《手风琴》效果

最新推荐文章于 2024-07-19 08:43:05 发布

新手小白web

最新推荐文章于 2024-07-19 08:43:05 发布

阅读量132

点赞数

分类专栏： script oop面向对象前端

本文链接：https://blog.csdn.net/qq_51874203/article/details/125173804

版权

javascript css css3

前端同时被 3 个专栏收录

37 篇文章 2 订阅

订阅专栏

script

27 篇文章 0 订阅

订阅专栏

oop面向对象

3 篇文章 0 订阅

订阅专栏

第一部分：css样式：

 body{
            height: 100vh;
            background-image: url(img/2.jpg);
            background-size: cover;
            background-position: center center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ul{
            width: 800px;
            height: 400px;
        }
        li{
            width: 80px;
            height: 100%;
            float: left;
            background-size: cover;
            background-position: center center;
            transition: .3s;
        }
        .open{
            width: 480px;
        }
        li p{
            width: 80px;
            height: 100%;
            color: white;
            background-color: rgba(255, 255, 255, .5);
            font-size: 60px;
        }

第二部分：body：

 <ul>
        <li class="open" style="background-image: url(img/1.jpg);">
            <p>风景</p>
        </li>
        <li  style="background-image: url(img/2.jpg);">
            <p>2</p>
        </li>
        <li style="background-image: url(img/3.jpg);">
            <p>3欧克</p>
        </li>
        <li style="background-image: url(img/4.jpg);">
            <p>4</p>
        </li>
        <li  style="background-image: url(img/5.jpg);">
            <p>5 </p>
        </li>
    </ul>

第三部分：script

Dom

 //获取li
     var lis=document.getElementsByTagName("li");

     var showIndex=0;//当前open的li下标
     //动态 
     for(var i=0;i<lis.length;i++){
         //动态为li标签添加属性
         lis[i].index=i;
         lis[i].onclick=function(){
             if(showIndex===this.index){
                 return;
             }
             //收起来已经展开的li
             //1.使用for循环全部去掉open
            //  for(var j=0;j<lis.length;j++){
            //      lis[j].className="";
            //  }
            //  2.动态添加下标
            lis[showIndex].className="";
             //展开点击的li(this)
             this.className="open";
            //  2.修改showIndex
            showIndex=this.index;
             //修改body的背景图
             document.body.style.backgroundImage=this.style.backgroundImage; 
         }
     }

$("li").click(function() {

        // $(".open").removeClass('open')

        // $(this).addClass('open');


        // 2:
        $(this).addClass("open").siblings().removeClass("open");
        // addClass//非破坏性操作

        // 背景（内联样式）
     $('body').css({
         'background-image':$(this).css('background-image')
     })
    })

手风琴