轩辕剑官网手风琴特效走一波

最新推荐文章于 2020-04-06 22:23:20 发布

芬贝

最新推荐文章于 2020-04-06 22:23:20 发布

阅读量341

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45027204/article/details/98472938

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

轩辕剑官网手风琴特效在这里插入图片描述
css代码部分

    <style>
        body{
            margin: 0;/*外边距*/
        }
        ul{                         /*ul*/
            list-style-type: none;
            /*无序列表li标签去掉小黑圆点*/
            margin:0;/*外边距*/
            padding:0;/*内边距*/
        }
        .accordion{                 /*div*/
            width:1124px;/*div的宽度*/
            height:438px;/*div的高度*/
            margin:50px auto 0 auto;
            /*盒子距离上 右 下 左 的外边距*/
        }
        .accordion ul .list-item{       /*li*/
            float:left;/*使5个li标签向左浮动*/
            width:86px;/*li宽度*/
            height:438px;/*li高度*/
            background-image: url("bg.jpg");/*li标签背景图片*/
            transition: 1s;/*设置时间为1s*/
        }
        .accordion ul .list-item:nth-child(1){      /*选择第几个li标签 添加背景图片*/
            background-image: url(pic1-on.jpg);
        }
        .accordion ul .list-item:nth-child(2){
            background-image: url(pic2-on.jpg);
        }
        .accordion ul .list-item:nth-child(3){
            background-image: url(pic3-on.jpg);
        }
        .accordion ul .list-item:nth-child(4){
            background-image: url(pic4-on.jpg);
        }
        .accordion ul .list-item:nth-child(5){
            background-image: url(pic5-on.jpg);
        }
        .accordion ul .show{  /*宽度变为780px*/
            width:780px;
        }
        .list-item img{
            opacity:1;/*透明度0-1 0全透明 0.5半透明 1不透明*/
        }
        .show img{ /*图片为全透明*/
            opacity:0;
        }
    </style>

html/JS代码部分

<body>
    <div class="accordion">
        <ul>
            <li class="list-item"><img src="pic1.png"></li>
            <li class="list-item"><img src="pic2.png"></li>
            <li class="list-item show"><img src="pic3.png"></li>    <!--插入图片-->
            <li class="list-item"><img src="pic4.png"></li>
            <li class="list-item"><img src="pic5.png"></li>
        </ul>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        $(".list-item").click(function(){
            /*点击this 添加一个类名 show 它的兄弟元素（其它list-item） 去除类名 show*/
            $(this).addClass("show").siblings().removeClass("show");
        });
    </script>
</body>

文件夹
在这里插入图片描述
分享一下素材图片