前端手风琴

最新推荐文章于 2024-08-04 16:33:59 发布

LongYuTianTang

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量278

点赞数

分类专栏：前端文章标签： vue js javascript html css

本文链接：https://blog.csdn.net/LongYuTianTang/article/details/109769154

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

js实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            vertical-align: top;
        }
        ul{
            width: 1150px;
            height: 320px;
            margin:100px auto;
        }
        li{
            width: 230px;
            height: 320px;
            overflow: hidden;
            float: left;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li style="background-color: red"></li>
        <li style="background-color: blue"></li>
        <li style="background-color: skyblue"></li>
        <li style="background-color: greenyellow"></li>
        <li style="background-color: deeppink"></li>
    </ul>
</div>
<script>
    window.onload=function(){
        var box = document.getElementById('box')
        var allli= document.getElementsByTagName('li')
        for(var i=0;i<allli.length;i++){
            var li = allli[i]
            li.index = i
            li.onmouseenter=function(){
                    for(var j=0;j<allli.length;j++){
                        allli[j].style.width= 100+'px'
                    }
                    allli[this.index].style.width=720 + 'px'

            }
            li.onmouseout=function(){
                for(var j=0;j<allli.length;j++){
                    allli[j].style.width= 230+'px'
                }
            }
        }
    }
</script>

</body>
</html>

jq实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            vertical-align: top;
        }
        /*#box{*/
        /*    width: 1150px;*/
        /*    height: 320px;*/
        /*    margin:100px auto;*/
        /*}*/
        ul{
            width: 1150px;
            height: 320px;
            margin:100px auto;
        }
        li{
            width: 230px;
            height: 320px;
            overflow: hidden;
            float: left;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li style="background-color: red"></li>
        <li style="background-color: blue"></li>
        <li style="background-color: skyblue"></li>
        <li style="background-color: greenyellow"></li>
        <li style="background-color: deeppink"></li>
    </ul>
</div>
<script>
    $(function(){
        $('li').mouseenter(function(){
            $(this).stop().animate({'width':720}).siblings().stop().animate({'width':100})
        })
        $("li").mouseleave(function(){
            $(this).stop().animate({"width":230}).siblings().stop().animate({"width":230})
        })
    })
</script>

</body>
</html>

vue实现手风琴特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            /*width: 1000px;*/
            height: 500px;
            /*background-color: #00FFFF;*/
            margin:100px auto;
        }
        li{
            float: left;
            width: 200px;
            height: 500px;
            /*border:1px solid #ccc;*/
        }
        p{
          border: 1px solid #ccc;
        }
        .big{
            width: 700px;
        }
        .small{
            width:100px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="box" :style="ulwidth">
    <li v-for="(color,index) in lis" v-bind:style="color" @click="change(index)" v-bind:class="['',cur==index ? big : small]"></li>
</ul>

<script>
    new Vue({
        el:'#box',
        data:{
            lis:['background: red','background: blue','background: green','background: pink','background: skyblue','background:purple'],
            cur:0,
            big:"big",
            small:'small'
        },
        computed:{
            ulwidth:function(){
                return {'width':(this.lis.length)*200+'px'}
            }
        },
        methods:{
            change:function(index){
                this.cur = index
            }
        }

    })
</script>
</body>
</html>

LongYuTianTang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端手风琴

js实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴</title> <style> *{ padding: 0; margin: 0; list-style: none; vertica
复制链接

扫一扫

专栏目录