侧边栏的实现（三）

来源：互联网发布：我的世界linux启动器编辑：程序博客网时间：2024/06/07 06:58

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

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

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    }

0 0