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 相关文章推荐
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
JS前端笔试题分析
Dec 19 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 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
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
url decode problem 解决方法
2011/12/26 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python求导数的方法
2015/05/09 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
军训的自我鉴定
2013/12/10 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
运动员获奖感言
2014/08/15 职场文书
公司委托书格式范本
2014/09/16 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
SQL Server使用导出向导功能
2022/04/08 SQL Server