js竖向可折叠的CSS滑动菜单特效代码

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!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=gb2312" /> 
<title>js竖向可折叠的CSS滑动菜单</title> 
</head> 
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>"> 
 
</style> 
<script type="text/javascript"> 
//<![CDATA[ 
window.onload = function() { 
rolinTab("rolin") 
} 
function rolinTab(obj) { 
var list = $(obj).getElementsByTagName("LI"); 
var state = {show:false,hidden:false,showObj:false}; 
for (var i=0; i<list.length; i++) { 
var tmp = new rolinItem(list[i],state); 
if (i == 0) tmp.pShow(); 
} 
} 
function rolinItem(obj,state) { 
var speed = 0.0666; 
var range = 1; 
var interval; 
var tarH; 
var tar = this; 
var head = getFirstChild(obj); 
var content = getNextChild(head); 
var isOpen = false; 
this.pHidden = function() { 
if (isOpen) hidden(); 
} 
this.pShow = show; 
var baseH = content.offsetHeight; 
content.style.display = "none"; 
var isOpen = false; 
head.onmouseover = function() { 
this.style.background = "#EFEFEF"; 
} 
head.onmouseout = mouseout; 
head.onclick = function() { 
this.style.background = "#EFEFEF"; 
if (!state.show && !state.hidden) { 
if (!isOpen) { 
head.onmouseout = null; 
show(); 
} else { 
hidden(); 
} 
} 
} 
function mouseout() { 
this.style.background = "#FFF" 
} 
function show() { 
head.style.borderBottom = "1px solid #DADADA"; 
state.show = true; 
if (state.openObj && state.openObj != tar ) { 
state.openObj.pHidden(); 
} 
content.style.; 
content.style.display = "block"; 
content.style.overflow = "hidden"; 
state.openObj = tar; 
tarH = baseH; 
interval = setInterval(move,10); 
} 
function showS() { 
isOpen = true; 
state.show = false; 
} 
function hidden() { 
state.hidden = true; 
tarH = 0; 
interval = setInterval(move,10); 
} 
function hiddenS() { 
head.style.borderBottom = "none"; 
head.onmouseout = mouseout; 
head.onmouseout(); 
content.style.display = "none"; 
isOpen = false; 
state.hidden = false; 
} 
function move() { 
var dist = (tarH - content.style.height.pxToNum())*speed; 
if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1; 
content.style.px"; 
if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) { 
clearInterval(interval); 
content.style.px"; 
if (tarH != 0) { 
showS() 
} else { 
hiddenS(); 
} 
} 
} 
} 
var $ = function($) {return document.getElementById($)}; 
String.prototype.pxToNum = function() {return Number(this.replace("px",""))} 
function getFirstChild(obj) { 
var result = obj.firstChild; 
while (!result.tagName) { 
result = result.nextSibling; 
} 
return result; 
} 
function getNextChild(obj) { 
var result = obj.nextSibling; 
while (!result.tagName) { 
result = result.nextSibling; 
} 
return result; 
} 
//]]> 
</script> 
<body> 
<ul class="rolinList" id="rolin"> 
<li> 
<h2>唐朝帝王槌</h2> 
<div class="content"><p>立剑赏月意惆怅,袖饰刀,衣披霜,傲视雾丸,徒手战扶桑.<br /> 
问津终寻帝王陵,黑影没,尸满岗,惟见逆鲮露寒光.　 <br /> 
须发苍,气轩昂,三尺银狼,破风动八方<br /> 
依身紧握噬魂枪,饮虎血,豪万丈.惟有千年我故乡!www.111com.net</p></div> 
</li> 
<li> 
<h2>玉女枪法</h2> 
<div class="content"><p>曾经有个梦想：驰骋江湖，快意恩仇。<br /> 
曾经有份愿望：千里追凶，十步溅血。<br /> 
曾经有腔豪情：奇功盖世，名冠武林。<br /> 
曾经有种期盼：烛影摇红，衣袖添香。</p></div> 
</li> 
<li> 
<h2>黑沙刚体</h2> 
<div class="content"><p>赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。 <br /> 
十步杀一人，千里不留行。事了拂衣去，深藏身与名。 <br /> 
闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯嬴。 <br /> 
三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。 <br /> 
纵死侠骨香，不惭世上英。谁能书阁下，白首太玄经。</p> 
</div> 
</li> 
<li> 
<h2>ASP源码下载</h2> 
<div class="content">请到这里来……</div> 
</li> 
<li> 
<h2>雾水掌</h2> 
<div class="content"><p>蹄影善奔,如幻如魔,其皮传世,绝学再现,<br /> 
又有谁在这残阳道中追逐它的身影... </p> 
</div> 
</li> 
</ul> 
</body> 
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

js竖向可折叠的CSS滑动菜单特效代码

相关文章

精彩推荐