<style>
body{
margin: 0;
padding: 0;
}
.page{
position: absolute;
height: 100%;
width: 100%;
background-color: lavender;
}
.top{
position: fixed;
width: 100%;
height: 50px;
background-color: cornflowerblue;
}
.btn{
width: 40px;
height: 40px;
margin-left: 20px;
margin-top: 5px;
background-color: #FFFFFF;
}
.btn:hover{
cursor: pointer;
}
.backimg{
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
background-color: black;
opacity: 0.2;
display: none;
}
</style>
<script>
$(document).ready(function(){
//侧滑按钮点击事件
$(".btn").click(function(){
//页面整体侧滑
$(".page").animate({
left:'300px'
});
//显示透明度div层
$(".backimg").css({
"display":"block"
});
});
//还原点击事件
$(".backimg").click(function(){
//页面整体左滑动
$(".page").animate({
left:'0px'
});
//显示透明度div层隐藏
$(".backimg").css({
"display":"none"
});
});
});
</script>
<div class="backimg"></div>
<div class="top">
<div class="btn"></div>
</div>
</div>
</body>