原生js写手风琴

最新推荐文章于 2024-05-17 09:47:06 发布

天下1281

最新推荐文章于 2024-05-17 09:47:06 发布

阅读量2.5k

点赞数 1

分类专栏：原生js 文章标签： js手风琴

本文链接：https://blog.csdn.net/boysky0015/article/details/57018251

版权

原生js 专栏收录该内容

165 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>原生js手风琴特效</title>
    <style>
    *{
        margin: 0;
padding: 0;
}
ul,li{
    list-style: none;
}
.box{
    width: 1050px;
    height: 300px;
    margin: 100px auto;
    overflow: hidden;
}
.accordion li{
    float: left;
    width: 100px;
    height: 300px;
    color: #000;
    font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
    <ul class="accordion">
        <li style="background: #f99;">1</li>
        <li style="background: #9ff;">2</li>
        <li style="background: #f9f;">3</li>
        <li style="background: #9f9;">4</li>
        <li style="background: blue;">5</li>
        <li style="width:450px;background: yellow;">6</li>
    </ul>
    </div>
    <script>
        function accordion(){
            var oBox = document.querySelector(".box");
            var accordion = oBox.querySelector(".accordion");
            var oList = accordion.getElementsByTagName("li");
            var i = 0;
            var timer = null;
            //console.log(oList.length);
            for(var i=0;i<oList.length;i++){
                oList[i].index = i;
                oList[i].onmouseover = function(){
                    var index = this.index;
                    if(timer){
                        clearInterval(timer);
                    }
                    timer = setInterval(function(){
                        var iWidth = oBox.offsetWidth;  //盒子的总宽度
                        //console.log(iWidth); 1050
                        for(var i=0;i<oList.length;i++){
                            if( index != oList[i].index ){
                                //设定速度
                                var speed = ( 100 - oList[i].offsetWidth) / 5;
                                speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
                                oList[i].style.width = oList[i].offsetWidth + speed + "px";
                                iWidth -= oList[i].offsetWidth;
                            }
                            oList[index].style.width = iWidth + "px";
                        }
                    },30);
                }
            }
        }
        accordion();
    </script>
</body>
</html>

天下1281

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js写手风琴

原生js手风琴特效*{margin: 0;padding: 0;}ul,li{list-style: none;}.box{width: 1050px;height: 300px;margin: 100px auto;overflow: hidden; }.accordion li{float: left;width: 100px
复制链接

扫一扫