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="/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
4.效果如下：
