JS实现的适合做faq或menu滑动效果示例
本文实例讲述了JS实现的适合做faq或menu滑动效果。分享给大家供大家参考，具体如下：
<!CTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="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:20pxauto0auto;text-align:left}
.rolinListli{margin-bottom:1px;border:1pxsolid#DADADA}
.rolinListlih2{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}
.contentp{margin:12px}
-->
</style>
<scripttype="text/javascript">
//<![CDATA[
window.onload=function(){
rolinTab("rolin")
}
functionrolinTab(obj){
varlist=$(obj).getElementsByTagName("LI");
varstate={show:false,hidden:false,showObj:false};
for(vari=0;i<list.length;i++){
vartmp=newrolinItem(list[i],state);
if(i==0)tmp.pShow();
}
}
functionrolinItem(obj,state){
varspeed=0.0666;
varrange=1;
varinterval;
vartarH;
vartar=this;
varhead=getFirstChild(obj);
varcontent=getNextChild(head);
varisOpen=false;
this.pHidden=function(){
if(isOpen)hidden();
}
this.pShow=show;
varbaseH=content.offsetHeight;
content.style.display="none";
varisOpen=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();
}
}
}
functionmouseout(){
this.style.background="#FFF"
}
functionshow(){
head.style.borderBottom="1pxsolid#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);
}
functionshowS(){
isOpen=true;
state.show=false;
}
functionhidden(){
state.hidden=true;
tarH=0;
interval=setInterval(move,10);
}
functionhiddenS(){
head.style.borderBottom="none";
head.onmouseout=mouseout;
head.onmouseout();
content.style.display="none";
isOpen=false;
state.hidden=false;
}
functionmove(){
vardist=(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($){returndocument.getElementById($)};
String.prototype.pxToNum=function(){returnNumber(this.replace("px",""))}
functiongetFirstChild(obj){
varresult=obj.firstChild;
while(!result.tagName){
result=result.nextSibling;
}
returnresult;
}
functiongetNextChild(obj){
varresult=obj.nextSibling;
while(!result.tagName){
result=result.nextSibling;
}
returnresult;
}
//]]>
</script>
<ulid="rolin">
<li>
<h2>毛票票1</h2>
<div<p>毛票票--专业IT综合性网站<br/><br/><atarget="_blank"href="https://www.nhooo.com/">https://www.nhooo.com/</a></p>
</div>
</li>
<li>
<h2>毛票票2</h2>
<div<p>毛票票--专业IT综合性网站<br/><br/><atarget="_blank"href="https://www.nhooo.com/">https://www.nhooo.com/</a></p>
</div>
</li>
<li>
<h2>毛票票3</h2>
<div<p>毛票票--专业IT综合性网站<br/><br/><atarget="_blank"href="https://www.nhooo.com/">https://www.nhooo.com/</a></p>
</div>
</li>
<li>
<h2>毛票票4</h2>
<div<p>毛票票--专业IT综合性网站<br/><br/><atarget="_blank"href="https://www.nhooo.com/">https://www.nhooo.com/</a></p>
</div>
</li>
<li>
<h2>毛票票5</h2>
<div<p>毛票票--专业IT综合性网站<br/><br/><atarget="_blank"href="https://www.nhooo.com/">https://www.nhooo.com/</a></p>
</div>
</li>
<li>
<h2>毛票票6</h2>
<div<p>毛票票--专业IT综合性网站<br/><br/><atarget="_blank"href="https://www.nhooo.com/">https://www.nhooo.com/</a></p>
</div>
</li>
</ul>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。