為了練手，自己學敲網站時剛好碰到需要制作側邊欄，在網上也查了各種插件以及框架都可以實現這個功能，但是想自己學著用js原生學一個試試，于是就初略完成了側邊欄的實現，可以讓初學者參考參考，代碼能力有限。
其中主要設計的就是animate（）函數，animate() 方法執行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）。更多的使用請自己去搜索，我就不具體介紹了。另外就是利用了媒體查詢的方法，通過檢測當前設備的屏幕大小進行調整側邊欄的大小設計。媒體查詢的方法可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面。
接下來是具體的實現，附上代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>側邊欄</title> <link href="css/sideBar.css" rel="stylesheet" type="text/css" /></head><body> <div class="container"> <div class="header"> <div class="nav-icon"> <span></span> <span></span> <span></span> </div> </div> <div class="content">側邊欄內容</div> <div class="sideBar"> <div class="sideBar-left"> <div class="divider"></div> <div class="body-content"> <div class="messageWarning item"> <div><i class="message_icon"></i>消息提醒</div> <ul> <li class="news"> <i class="circle"></i><a href="javascript:void()">消息1</a> </li> <li class="news"> <i class="circle"></i><a href="javascript:void()">消息2</a> </li> <li class="news"> <i class="circle"></i><a href="javascript:void()">消息3</a> </li> <li class="news"> <i class="circle"></i><a href="javascript:void()">消息4</a> </li> </ul> </div> <div class="course item"> <div><i class="icon"></i>課程</div> <ul> <li class="myInfo"> <i class="circle"></i><a href="javascript:void()">我的課程</a> </li> <li class="Dynamic"> <i class="circle"></i><a href="javascript:void()">課程動態</a> </li> <li class="question"> <i class="circle"></i><a href="javascript:void()">問題空間</a> </li> <li class="homework"> <i class="circle"></i><a href="javascript:void()">課程作業</a> </li> </ul> </div> <div class="myHome item"> <a href="javascript:void()"> <i class="home_icon"></i>我的主頁 </a> </div> <div class="exit item"> <a href="javascript:void()"> <i class="exit_icon"></i>退出 </a> </div> </div> </div> <div class="sideBar-right"></div> </div> </div></body><script src="js/jquery-2.1.4.min.js"></script><script src="js/sideBar.js"></script></html>
js實現：
$(function(){ var windowWidth = $(window).width(); var windowHeight = $(window).height(); var sideBarWidth = windowWidth*0.8; //設置側邊欄左邊寬度與右邊高度 $(".sideBar-left").height(windowHeight); $(".sideBar-right").height(windowHeight); //側邊欄由左向右滑動 $(".nav-icon").on("click",function(){ $(".sideBar").animate({left: "0"},350); }); //點擊退出，側邊欄由右向左滑動 $(".exit").on("click",function(){ $(".sideBar").animate({left: "-100%"},350); });}) css設計：
*{ margin: 0;}a{ color: #fff; text-decoration: none;}.container{ width: 100%; height: 100%; min-width: 280px; position: relative;}.header{ background: #0C7AB3; list-style: none;}.nav-icon{ width: 30px; background: #0C7AB3; padding: 8px;}.nav-icon span{ display: block; border: 1px solid #fff; margin: 4px; width: 20px;}.nav-icon:hover{ cursor: pointer;}.sideBar{ width: 100%; position: absolute; top: 0px; left: -100%;}.sideBar-left{ width: 75%; background: #fff; float: left; background-color: #343A3E;}.sideBar-left .divider{ width: 80%; height: 6px; margin-top: 30px; padding-left: 15px; background-color: #3099FF;}.sideBar-left .body-content{ width: 80%; margin-top: 15px; padding: 15px 0 15px 15px; border-top: 2px solid #3099FF; color: #EFEFEF;}.body-content .item{ margin: 4px;}.item ul{ list-style: none; margin-left: -24px;}.item ul li{ margin:8px;}.item .circle{ width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background-color: #3099FF; display: inline-block;}.sideBar-right{ width:25%; display: inline-block; background-color: rgba(0, 0, 0, 0.5);}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
