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>

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

Javascript 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jQuery表单验证之密码确认
May 22 jQuery
Swiper实现轮播图效果
Jul 03 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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
You might like
基于php使用memcache存储session的详解
2013/06/25 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
php服务器的系统详解
2019/10/12 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python学习必备知识汇总
2017/09/08 Python
简单了解python模块概念
2018/01/11 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
工程业务员岗位职责
2013/12/31 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
合作协议书怎么写
2014/04/18 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
详解MySQL集群搭建
2021/05/26 MySQL
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js