js下移动端底部下拉菜单

最新推荐文章于 2022-11-30 14:32:42 发布

sinat_20625509

最新推荐文章于 2022-11-30 14:32:42 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏：经验总结

本文链接：https://blog.youkuaiyun.com/sinat_20625509/article/details/47083037

经验总结专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript在移动端实现一个底部下拉菜单的效果。内容包括菜单区域（a）和触发按钮（b），当点击按钮时，菜单区域与按钮同时上拉，再次点击则返回原位。菜单和按钮的定位方式为absolute，底部距离设置为0px，通过调整菜单高度和按钮的上移距离来实现动画效果，确保两者运动速度一致。实现过程中主要借助JavaScript改变元素的CSS类来控制显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a为要要上拉的菜单，b为点击按钮的部分，点击b，a与b一起上拉，再点击下退

abosolute下都为bottom：0px，a通过改变高度，b向上位移a的高度，二者的速度一样

在js中通过改变class

var k;
        $('#touch').onclick = function () {
           if(!k){
               $('#a').className="la";
               $('#b').className="bla";

               k=1;

           }
            else{
               $('#a').className="tui";
               $('#b').className="btui";
               k=0;
           }

        }

css：

上拉菜单部分：

.la{
    -webkit-animation: la 2s both linear ;
    animation: la 2s both linear ;
}


@-webkit-keyframes la{
    from{

    }
    to{
      height: 300px;
    }
}


.tui{
    -webkit-animation: tui 2s both linear ;
    animation: tui 2s both linear ;
}


@-webkit-keyframes tui{
    from{
        height: 300px;

    }
    to{
        height: 0px;
    }
}

按钮区域部分：

.bla{
    -webkit-animation: bla 2s both linear ;
    animation:bla 2s both linear ;
}


@-webkit-keyframes bla{
    from{
        bottom: 0;


    }
    to{
      bottom:300px;
    }
}