编程 Javascript

js+html5实现侧滑页面效果

Posted in Javascript onJuly 15, 2017

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

before：

js+html5实现侧滑页面效果

after：

js+html5实现侧滑页面效果

代码：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <title></title>
 <script src="js/mui.min.js"></script>
 <link href="css/mui.min.css" rel="stylesheet" />
 <style type="text/css">
 .cover {
 background-color: #0062CC;
 height: 100%;
 width: 100%;
 display: none;
 opacity: 0;
 position: absolute;
 }
 
 .mui-off-canvas-left {
 background-color: #F0AD4E;
 }
 </style>
 </head>

 <body>
 <!-- 侧滑导航根容器 -->
 <div class="mui-off-canvas-wrap mui-draggable">
 <!-- 主页面容器 -->
 <div class="mui-inner-wrap">
 <!-- 菜单容器 -->
 <aside class="mui-off-canvas-left">
  <div class="mui-scroll-wrapper">
  <div class="mui-scroll">
  侧滑页面
  </div>
  </div>
 </aside>
 <!-- 主页面标题 -->
 <header class="mui-bar mui-bar-nav">
  <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
  <h1 class="mui-title">标题</h1>
 </header>
 <!-- 主页面内容容器 -->
 <div class="mui-content mui-scroll-wrapper">
  <div class="cover"></div>
  <div class="mui-scroll">
  <!-- 主界面具体展示内容 -->
  主页面
  </div>
 </div>
 </div>
 </div>
 <script src="js/jquery-git.js"></script>
 <script type="text/javascript">
 $('.mui-pull-left').click(function() {
 mui('.mui-off-canvas-wrap').offCanvas('show');
 $('.cover').css('display', 'block');
 });

 $('.cover').click(function() {

 mui('.mui-off-canvas-wrap').offCanvas('close');
 $('.cover').css('display', 'none');
 });
 </script>
 </body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js+html5实现侧滑页面效果

- Author -

ouqi_qiou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript页面添加到收藏夹的简单方法

Aug 07 Javascript

jQuery实现自定义下拉列表

Jan 05 Javascript

JavaScript事件委托技术实例分析

Feb 06 Javascript

Angularjs实现多个页面共享数据的方式

Mar 29 Javascript

JS判断元素是否在数组内的实现代码

Mar 30 Javascript

如何用js实现鼠标向上滚动时浮动导航

Jul 18 Javascript

Vuejs第七篇之Vuejs过渡动画案例全面解析

Sep 05 Javascript

jQuery自动或手动图片切换效果

Oct 11 jQuery

微信小程序6位或多位验证码密码输入框功能的实现代码

May 29 Javascript

vue的三种图片引入方式代码实例

Nov 19 Javascript

js实现数据导出为EXCEL（支持大量数据导出）

Mar 31 Javascript

javascript运行机制之执行顺序理解

Aug 03 Javascript

angular2 ng build部署后base文件路径问题详细解答

Jul 15 #Javascript

Angular2关于@angular/cli默认端口号配置的问题

Jul 15 #Javascript

js编写简单的计时器功能

Jul 15 #Javascript

深入理解angular2启动项目步骤

Jul 15 #Javascript

js+html5实现复制文字按钮

Jul 15 #Javascript

js+html5实现页面可刷新的倒计时效果

Jul 15 #Javascript

详解ES6之用let声明变量以及let loop机制

Jul 15 #Javascript