JS基于構(gòu)造函數(shù)實(shí)現(xiàn)的菜單滑動(dòng)顯隱效果【測(cè)試可用】
更新時(shí)間：2016年06月21日 10:55:31 作者：cherry
這篇文章主要介紹了JS基于構(gòu)造函數(shù)實(shí)現(xiàn)的菜單滑動(dòng)顯隱效果,可實(shí)現(xiàn)基本的菜單折疊與展開功能,涉及javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS基于構(gòu)造函數(shù)實(shí)現(xiàn)的菜單滑動(dòng)顯隱效果。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="; charset=utf-8" />
<title>JS樹型菜單</title>
<script language="javascript">
function SDMenu(id) {
if (!document.getElementById || !document.getElementsByTagName)
return false;
this.menu = document.getElementById(id);
this.submenus = this.menu.getElementsByTagName("div");
this.remember = true;
this.speed = 1;
this.markCurrent = true;
this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
var mainInstance = this;
for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};
/*if (this.markCurrent) {
var links = this.menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
if (links[i].href == document.location.href) {
links[i].className = "current";
break;
}
}*/
if (this.remember) {
var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split("");
for (var i = 0; i < states.length; i++)
this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
}
}
};
SDMenu.prototype.toggleMenu = function(submenu) {
if (submenu.className == "collapsed")
this.expandMenu(submenu);
else
this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var links = submenu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
fullHeight += links[i].offsetHeight;
var moveBy = Math.round(this.speed * links.length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight + moveBy;
if (newHeight < fullHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "";
mainInstance.memorize();
}
}, 10);
//this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight - moveBy;
if (newHeight > minHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "collapsed";
mainInstance.memorize();
}
}, 10);
};
/*SDMenu.prototype.collapseOthers = function(submenu) {
if (this.oneSmOnly) {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
}
};*/
SDMenu.prototype.memorize = function() {
if (this.remember) {
var states = new Array();
for (var i = 0; i < this.submenus.length; i++)
states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
}
};
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
</script>
<style type="text/css">
html,body{
height:100%;
margin:0;
font-size:12px;
}
span{
background:#F0DFBE;
border:1px solid #ffffff;
border-left:6px solid #F2A31B;
width:228px;
height:23px;
display:block;
line-height:23px;
padding-left:20px;
}
a{
padding:3px 0 3px 40px;
display:block;
color:#636363;
}
#my_menu{
width:255px;
background:#F7F2E4;
height:100%;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div{
overflow: hidden;
}
</style>
</head>
<body>
<div style="float:left" id="my_menu" class="sdmenu">
<div>
<span>菜單一</span>
<a href="#">> 菜單一子內(nèi)容</a>
<a href="#">> 菜單一子內(nèi)容</a>
<a href="#">> 菜單一子內(nèi)容</a>
<a href="#">> 菜單一子內(nèi)容</a>
<a href="#">> 菜單一子內(nèi)容</a>
</div>
<div>
<span>菜單二</span>
<a href="#">> 菜單二子內(nèi)容</a>
<a href="#">> 菜單二子內(nèi)容</a>
<a href="#">> 菜單二子內(nèi)容</a>
</div>
<div>
<span>菜單三</span>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
</div>
<div>
<span>菜單三</span>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
</div>
<div>
<span>菜單三</span>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
</div>
<div>
<span>菜單x</span>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
</div>
</div>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS模擬bootstrap下拉菜單效果實(shí)例
- 基于JS代碼實(shí)現(xiàn)導(dǎo)航條彈出式懸浮菜單
- 通用的二級(jí)菜單代碼(css+javascript)
- 一個(gè)簡單的js樹形菜單
- js實(shí)現(xiàn)的全國省市二級(jí)聯(lián)動(dòng)下拉選擇菜單完整實(shí)例
- Js 豎直伸縮菜單(百度)
- js 全兼容可高亮二級(jí)緩沖折疊菜單
- 用js實(shí)現(xiàn)的比較經(jīng)典實(shí)用的觸發(fā)型導(dǎo)航菜單
- JS實(shí)現(xiàn)的豎向折疊菜單代碼
- JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼
- JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果
相關(guān)文章
這篇文章主要介紹了JS中parseInt()和map()用法,結(jié)合實(shí)例形式分析了parseInt()和map()方法的功能、參數(shù)、具體用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
關(guān)于JS打印問題！網(wǎng)上收集+自己總結(jié) ，需要的朋友可以參考下。2009-11-11
Promise，相信每一個(gè)前端工程師都或多或少地在項(xiàng)目中都是用過，畢竟它早已不是一個(gè)新名詞。ES6中已經(jīng)原生對(duì)它加以支持，在caniuse中搜索一下 Promise ，發(fā)現(xiàn)新版的chrome和firefox也已經(jīng)支持。但是低版本的瀏覽器我們可以使用 es6-promise 這個(gè) polyfill 庫來加以兼容。2017-02-02
操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼
在一些購物平臺(tái)經(jīng)常需要將商品加入購物車，像加入購物車按鈕、結(jié)算按鈕、收貨列表添加地址按鈕都是按鈕懸浮底部的，怎么實(shí)現(xiàn)這樣的功能呢？下面小編給大家?guī)砹瞬僮靼粹o懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼，一起看看吧2019-08-08
JavaScript詳解類數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理，ES6中引入了迭代器與可迭代對(duì)象的概念，并且提供了對(duì)可迭代對(duì)象的相關(guān)支持，如for...of循環(huán)，Map(iterable)構(gòu)造器，展開語法...等。讓我們對(duì)數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡化2022-06-06
JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊(duì)列與循環(huán)隊(duì)列實(shí)例詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊(duì)列與循環(huán)隊(duì)列,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascrip數(shù)據(jù)結(jié)構(gòu)中優(yōu)先隊(duì)列與循環(huán)隊(duì)列的原理、定義與使用方法,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了JavaScript獲取表單enctype屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
模塊熱替換(HMR)的作用是，在應(yīng)用運(yùn)行時(shí)，無需刷新頁面，便能替換、增加、刪除必要的模塊，本篇文章主要介紹了webpack熱模塊替換（HMR）/熱更新的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
JavaScript實(shí)現(xiàn)網(wǎng)頁五子棋小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript實(shí)現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的五種方法總結(jié)
在?JavaScript?編程中，將數(shù)組轉(zhuǎn)換為樹結(jié)構(gòu)是一個(gè)常見的需求。本篇博客將介紹五種常用的方法來實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹結(jié)構(gòu)，希望對(duì)大家有所幫助2023-03-03