侧边栏的实现（三）

最新推荐文章于 2023-12-23 23:46:51 发布

WittyLu

最新推荐文章于 2023-12-23 23:46:51 发布

阅读量1.1k

点赞数

分类专栏： css js 文章标签： js css

本文链接：https://blog.csdn.net/baidu_28479651/article/details/62043258

版权

js 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

侧边栏的滑动效果还有另外的实现方式，想了解的朋友可以尝试下。

其余代码不变，需要修改的如下。

1、css

/*侧栏*/
#sidebar{
    position: fixed;
    top:0;
    /*right:-300px;*/
    right:0;
    -webkit-transform: translate(300px, 0);
    -moz-transform: translate(300px, 0);
    -ms-transform: translate(300px, 0);
    -o-transform: translate(300px, 0);
    transform: translate(300px, 0);
    bottom:0;
    width:300px;
    background: #333;
    padding:20px 0;
    transition:right 0.5s;
}

translate(x,y) ：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数。

2、js

function showSideBar() {//显示侧栏
        mask.fadeIn();//显示mask
        sidebar.css('transform','translate(0,0)');//调整侧栏相关的css
    }
    function hideSideBar() {//隐藏侧栏
        mask.fadeOut();//隐藏mask
        sidebar.css('transform', 'translate('+sidebar.width()+'px'+',0)');//调整侧栏相关的css
    }