js+html5實現(xiàn)側(cè)滑頁面效果

更新時間：2017年07月15日 15:57:58 作者：ouqi_qiou

這篇文章主要為大家詳細介紹了js+html5實現(xiàn)側(cè)滑頁面效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了html5實現(xiàn)側(cè)滑頁面效果展示的具體代碼，供大家參考，具體內(nèi)容如下

before：

after：

代碼：

<!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>
 <!-- 側(cè)滑導(dǎo)航根容器 -->
 <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">
  側(cè)滑頁面
  </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>
 <!-- 主頁面內(nèi)容容器 -->
 <div class="mui-content mui-scroll-wrapper">
  <div class="cover"></div>
  <div class="mui-scroll">
  <!-- 主界面具體展示內(nèi)容 -->
  主頁面
  </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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Js nodeType 屬性全面解析
本文是對Js nodeType的屬性進行了全面分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
奇偶行高亮顯示及鼠標劃過高亮顯示類
奇或偶數(shù)行高亮顯示及鼠標莫過高亮顯示,一個經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒有一個封裝成類直接用的.想象自己當初谷歌這個類時,還真沒少折騰時間.
2010-07-07
微信小程序緩存過期時間的使用詳情
這篇文章主要介紹了微信小程序緩存過期時間的使用詳情，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
微信小程序webSocket的使用方法
這篇文章主要介紹了微信小程序webSocket的使用方法,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
Javascript 檢測鍵盤按鍵信息及鍵碼值對應(yīng)介紹
Javascript中有3個事件句柄在對應(yīng)鍵盤的輸入狀態(tài):按鍵被按下（按下按鍵但還沒有抬起）、點擊按鍵（按下并抬起按鍵）、按鍵抬起（按鍵抬起之后）,接下來詳細介紹，感興趣的朋友可以了解下
2013-01-01
ES6中javascript實現(xiàn)函數(shù)綁定及類的事件綁定功能詳解
這篇文章主要介紹了ES6中javascript實現(xiàn)函數(shù)綁定及類的事件綁定功能,結(jié)合實例形式分析了ES6中函數(shù)綁定及類的事件綁定原理、實現(xiàn)方法、相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2017-11-11
javascript常用函數(shù)（1）
這篇文章主要介紹了javascript常用函數(shù)，15個常用函數(shù)，都具有很高的實用性，感興趣的小伙伴們可以參考一下
2015-11-11
javascript使用正則表達式實現(xiàn)去掉空格之后的字符
這篇文章主要介紹了javascript使用正則表達式實現(xiàn)去掉空格之后的字符的方法,需要的朋友可以參考下
2015-02-02
javascript結(jié)合fileReader 實現(xiàn)上傳圖片
FileReader具體支持哪些方法和事件，這里就不介紹了，有興趣的可以去w3c官網(wǎng)上看看FileReader介紹，這里主要介紹一下FileReader常見應(yīng)用，以及fileReader 實現(xiàn)上傳圖片示例分享。
2015-01-01
JavaScript設(shè)計模式之原型模式分析【ES5與ES6】
這篇文章主要介紹了JavaScript設(shè)計模式之原型模式,簡單描述了原型模式的概念、原理,并結(jié)合實例形式分析了ES5與ES6實現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07