1. Jquery实现左侧页面切换滑入,滑出实例代码展示:
1.1 CSS3样式:
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/***右侧窗口****/
.right-block-window{
width: 50rem;
height: 100%;
position: fixed;
left: 0rem;
top: 0rem;
}
/***左侧切换隐藏按钮****/
.btn-folded{
width: 20px;
height: 60px;
position: absolute;
top: 0;
right: 0;
outline: none;
border: none;
background-color: #072e7d;
z-index: 222;
border-bottom-right-radius: 8px;
color: #fff;
font-size: 18px;
}
.right-block-window-content{
width: 48.75rem;
height: 100%;
background-color: rgba(7,46,125,0.48);
position: relative;
left: 0;
top: 0;
overflow: auto;
color: #fff;
text-align: center;
}
.m_player_folded {
background-position: -23px 0;
}
</style>
2. HTML 代码:
<!--左侧侧窗口-->
<div class="right-block-window" >
<!--主体-->
<div class="right-block-window-content" >
主体内容
</div>
<!--左侧切换隐藏按钮-->
<button type="button" class="btn-folded"><i class="fa fa-angle-double-left"></i> </button>
</div>
3.Jquery 代码:
<script src="jquery-3.3.1.min.js"></script> <script > //左侧切换隐藏按钮 Click $('.btn-folded').on('click',function () { if(!$('.right-block-window').hasClass('m_player_folded')){ $(".btn-folded").find("i").removeClass("fa-angle-double-left").addClass("fa-angle-double-right");//图标 $(".right-block-window").animate({left:"-48.7rem"},800); }else{ $(".btn-folded").find("i").removeClass("fa-angle-double-right").addClass("fa-angle-double-left");//图标 $(".right-block-window").animate({left:"0"},800); } $('.right-block-window') .delay(0) .queue(function () { $(this).toggleClass('m_player_folded').dequeue(); }) }); //endregion </script> // 图标地址 //css 样式引用 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
4.效果如下: