點選側邊欄展開和收縮程式碼例項
本章節分享一段程式碼例項,它實現了點選展開和收縮側邊欄效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { padding: 0; margin: 0; } body, html { height: 100%; width: 100%; } .box-flex { height: 100%; width: 100%; display: flex; } #box { height: 100%; width: 300px !important; background: #282828; position: relative; margin-left: -300px; float: left; } #box span { height: 30px; width: 30px; position: absolute; top: 0; right: -30px; background: #ccc; } #box ul { padding: 0; margin: 0; width: 100%; height: 100%; } #box ul li { list-style-type: none; height: 40px; line-height: 40px; font-family: Arial; font-size: 16px; text-align: center; } #box ul li.menu-header { height: 200px; width: 100%; line-height: 200px; color: white; font-size: 50px; font-family: "微軟雅黑"; } #box ul li a { color: #fff; text-decoration: none; display: block; height: 100%; width: 100%; } #box ul li a:hover { background: #404040; } .antzone { height: 100%; width: 100%; background: green; float: left; padding-left: 50px; font-size: 30px; color: white; font-family: "微軟雅黑"; } </style> <script type="text/javascript"> window.onload = function() { var oBox = document.getElementById('box'); var oBtn = document.getElementById('btn'); function addEveent(ele, type, fn) { if (ele.addEventListener) { ele.addEventListener(type, fn, false) } else if (ele.attachEvent) { ele.attachEvent("on" + type, fn) } else { ele['on' + type] = fn; } } addEveent(oBtn, 'click', fnMove); function fnMove() { var oLeft = parseInt(oBox.offsetLeft); if (oLeft == -300) { animate(10); } else { animate1(-10); } } function animate(speed) { var t = setInterval(function() { var oLeft = parseInt(oBox.offsetLeft); if ((oLeft = -300 && oLeft < 0)) { oBox.style["margin-left"] = oBox.offsetLeft + speed + 'px'; } else { clearInterval(t) } }, 10) } function animate1(speed) { var t = setInterval(function() { var oLeft = parseInt(oBox.offsetLeft); if (oLeft <= 0 && oLeft > -300) { oBox.style["margin-left"] = oBox.offsetLeft + speed + 'px'; } else { clearInterval(t) } }, 10) } } </script> </head> <body> <div class="box-flex"> <div id="box"> <span id='btn'></span> <ul> <li class="menu-header">螞蟻部落</li> <li><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落三</a></li> <li><a href="#">螞蟻部落四</a></li> <li><a href="#">螞蟻部落五</a></li> <li><a href="#">螞蟻部落六</a></li> <li><a href="#">螞蟻部落七</a></li> <li><a href="#">螞蟻部落八</a></li> <li><a href="#">螞蟻部落九</a></li> <li><a href="#">螞蟻部落十</a></li> </ul> </div> <div class='antzone'>本站的url是softwhy.com</div> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
[JavaScript] 純文字檢視 複製程式碼window.onload = function() { //code }
當文件內容完全載入完畢再去執行函式中的程式碼。
[JavaScript] 純文字檢視 複製程式碼var oBox = document.getElementById('box'); var oBtn = document.getElementById('btn');
獲取指定id的元素物件。
[JavaScript] 純文字檢視 複製程式碼function addEveent(ele, type, fn) { if (ele.addEventListener) { ele.addEventListener(type, fn, false) } else if (ele.attachEvent) { ele.attachEvent("on" + type, fn) } else { ele['on' + type] = fn; } }
相容所有瀏覽器的事件處理函式註冊封裝。
[JavaScript] 純文字檢視 複製程式碼addEveent(oBtn, 'click', fnMove)
為按鈕註冊click事件處理函式,點選此按鈕就會執行fnMove(),進行展開和收縮操作。
[JavaScript] 純文字檢視 複製程式碼function fnMove() { var oLeft = parseInt(oBox.offsetLeft); if (oLeft == -300) { animate(10); } else { animate1(-10); } }
此函式實現了展開和收縮功能。
var oLeft = parseInt(oBox.offsetLeft)獲取oBox元素距離body左側的距離。
然後判斷如果這個距離是-300,也就是摺疊狀態,就執行animate(10)函式,也就是展開;
否則執行animate1(-10),也就是執行摺疊操作。
[JavaScript] 純文字檢視 複製程式碼function animate(speed) { var t = setInterval(function() { var oLeft = parseInt(oBox.offsetLeft); if ((oLeft = -300 && oLeft < 0)) { oBox.style["margin-left"] = oBox.offsetLeft + speed + 'px'; } else { clearInterval(t) } }, 10) }
很簡單就是通過定時器函式,不斷修改側邊欄的左外邊距,最終實現了動畫方式的展開效果。
二.相關閱讀:
(1).addEventListener()參閱JavaScript addEventListener()一章節。
(2).parseInt()參閱JavaScript parseInt()一章節。
(3).offsetLeft參閱JavaScript offsetleft一章節。
(4).setInterval()參閱JavaScript setInterval()一章節。
相關文章
- 影片直播原始碼,預設展開側邊欄選單原始碼
- 點選標題實現內容元素伸展和收縮程式碼例項
- jQuery點選展開收起程式碼例項jQuery
- 小程式迴圈列表點選展開收縮
- 側欄能夠定位的導航選單程式碼例項
- 點選標題可以展開效果程式碼例項
- jquery實現的下拉和收縮程式碼例項jQuery
- css側邊一排小孔程式碼例項CSS
- 點選可以展開和關閉的搜尋框程式碼例項
- JavaScript點選div塊展開和收縮效果詳解JavaScript
- css左側欄固定右側欄寬度自適應程式碼例項CSS
- JavaScript 側欄選項卡JavaScript
- 去除input焦點描邊程式碼例項
- 點選獲取焦點可以伸縮的搜尋框程式碼例項
- TornadoFx實現側邊欄選單效果
- JavaScript點選投票效果程式碼例項JavaScript
- Flutter drawer側邊欄Flutter
- JavaScript側邊欄顯示和隱藏JavaScript
- 微信小程式『側邊欄滑動』特效微信小程式特效
- 點選左右箭頭可以移動選項例項程式碼
- jQuery點選滑出層效果程式碼例項jQuery
- 點選返回上一頁程式碼例項
- 點選連結不跳轉例項程式碼
- jQuery點選回車事件程式碼例項jQuery事件
- 點選刪除表格行程式碼例項行程
- 垂直可伸縮的導航選單例項程式碼單例
- 文字嵌入邊框程式碼例項
- css多重邊框程式碼例項CSS
- JavaScript 點選複製選中文字程式碼例項JavaScript
- canvas縮放div程式碼例項Canvas
- 點選彈出鎖屏層例項程式碼
- js模擬點選連結程式碼例項JS
- 點選彈出半透明層程式碼例項
- 直播系統程式碼,點選選擇欄,彈出各個選項
- jQuery選項卡例項程式碼jQuery
- Oracle資料檔案收縮例項Oracle
- 點選實現顯示密碼效果程式碼例項密碼
- zepto點選檢視密碼明文效果程式碼例項密碼