js html5实现侧滑页面效果

本文实例为大家分享了html5实现侧滑页面效果展示的具体代码，供大家参考，具体内容如下

之前：

之后：

代码：

！DOCTYPE html html head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1，mini-scale=1，maximum-scale=1，user-scale=no '/title/title script src=' http : js/mui。量滴js '/脚本链接href=' CSS/mui。量滴CSS ' rel='样式表/style type='text/css ' .封面{背景色-颜色： # 0062 cc高度： 100%;宽度： 100%;显示器：无；opa城市3360 0；绝对位置：} .mui-off-canvas-left {底色： # F0AD4E}/风格/头身！-侧滑导航根容器-div class=' mui-off-canvas-wrap mui-draggable '！-主页面容器-div class=' mui-内包！-菜单容器-旁白=' mui-off-canvas-left ' div class=' mui-roll-wrapper ' div class=' mui-roll '侧滑页面/div/一旁！-主页面标题-header class=' mui-bar mui-bar-nav ' a class=' mui-icon mui-action-menu mui-icon-bar mui-pull-left '/a h1 class=' mui-title '标题/h1/表头！-主页面内容容器-div class=' mui-content mui-scroll-wrapper ' div class=' cover '/div class=' mui-scroll '！-主界面具体展示内容-主页面/div /div /div脚本src=' http : js/jquery-git。js /脚本脚本类型='text/javascript' $(' .mui-拉-左')。单击(function() { mui ').mui-off-canvas-wrap ').画布外("显示");$('.封面')。css('display '，' block ')；});$('.封面')。单击(function() { mui ').mui-off-canvas-wrap ').画布外("关闭");$('.封面')。css('display '，' none ')；});/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。