JS实现的适合做faq或menu滑动效果示例

<!CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"><!--body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,"宋体"}body{ text-align:center; font-size:12px}li{ list-style:none}.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}.rolinList li{margin-bottom:1px;border:1px solid #DADADA}.rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}.content{ height:150px;width:400px; background:#fff; background:#FAFAFA}.content p{ margin:12px}--></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.height = "0px";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.height = (content.style.height.pxToNum() + dist) + "px";if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) {clearInterval(interval);content.style.height = tarH + "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><ul id="rolin">  <li>  <h2>武林网 1</h2>  <div <p>武林网--专业IT综合性网站<br /><br /><a target="_blank" href="//www.VeVB.COm/">//www.VeVB.COm/</a></p>  </div>  </li>  <li>  <h2>武林网 2</h2>  <div <p>武林网--专业IT综合性网站<br /><br /><a target="_blank" href="//www.VeVB.COm/">//www.VeVB.COm/</a></p>  </div>  </li>  <li>  <h2>武林网 3</h2>  <div <p>武林网--专业IT综合性网站<br /><br /><a target="_blank" href="//www.VeVB.COm/">//www.VeVB.COm/</a></p>  </div>  </li>  <li>  <h2>武林网 4</h2>  <div <p>武林网--专业IT综合性网站<br /><br /><a target="_blank" href="//www.VeVB.COm/">//www.VeVB.COm/</a></p>  </div>  </li>  <li>  <h2>武林网 5</h2>  <div <p>武林网--专业IT综合性网站<br /><br /><a target="_blank" href="//www.VeVB.COm/">//www.VeVB.COm/</a></p>  </div>  </li>  <li>  <h2>武林网 6</h2>  <div <p>武林网--专业IT综合性网站<br /><br /><a target="_blank" href="//www.VeVB.COm/">//www.VeVB.COm/</a></p>  </div>  </li></ul>