非常不错的切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://pic1.xuehuaimg.com/proxy/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>下拉效果</title>
<script type=text/javascript>
function $(d){return document.getElementById(d)}
function g(d,v){
if(v==undefined){
if(d.style.display!="none"&&d.style.display!=""){return d.offsetHeight}
o=d.style.display;
d.style.display="block";
v=parseInt(d.offsetHeight);
d.style.display=o;
return v
}
else{d.style.height=v+"px"}
}
function of(d,v){
g(d,v);
v=v/d.h;
d.style.opacity=v;
d.style.filter="alpha(opacity="+v*100+")"
}
function b(d){
d=$(d);
z=g(d);
x=d.h;
if(z>0){v=Math.round(z/d.s);v=(v<1)?z-1:z-v;of(d,v)}
else{g(d,0);d.style.display="none";clearInterval(d.t)}
}
function e(d){
d=$(d);
z=g(d);
x=d.h;
d.style.display="block";
if(z<x){v=Math.round((x-z)/d.s);v=(v<1)?z+1:v+z;of(d,v)}
else{g(d,x);clearInterval(d.t)}
}
function Accordian(d,s,f){
l=$(d).getElementsByTagName("div");
a=[];
for(i=0;i<l.length;i++){
d=l[i];
if(d.id.substr(d.id.indexOf("-"),d.id.length)=="-content"){a.push(d)}
}
x=null;
for(i=0;i<l.length;i++){
(function(h){
c=h.id.substr(0,h.id.indexOf("-"));
if(c+"-header"==h.id){
c=$(c+"-content");
c.style.display="none";
c.style.overflow="hidden";
c.h=g(c);
c.s=(s==undefined)?7:s;
h.f=f;
h.c=a;
if(h.className.match(new RegExp(f+"+"))){x=h}
h.onclick=function(){
for(j=0;j<this.c.length;j++){
n=this.c[j].id;
n=n.substr(0,n.indexOf("-"));
d=$(n+"-header");
n=$(n+"-content");
s=d.className.split(new RegExp("\\s+"));
for(p=0;p<s.length;p++){
if(s[p]==""+d.f){s.splice(p,1);d.className=s.join(" ");break}
}
clearInterval(n.t);
if(d.id==this.id){if(n.style.display=="none"){g(n,0);n.t=setInterval('e("'+n.id+'")',9)}d.className+=" "+d.f}
else{if(n.style.display=="block"){n.t=setInterval('b("'+n.id+'")',9)}}
}
}
}
})(l[i])
}
if(x!=null){x.onclick()}
}
</script>
<style type="text/css">

</style>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
<div id="basic-accordian" >
<div id="test-header" class="accordion_headings header_highlight" >
<div class="oknum"><div class="bianhao">1</div><div class="biaoti">Home</div><div class="riqi">
January 2008 </div></div>
</div>
<div id="test-content">
<div class="accordion_child">
<img src="https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/https://pic1.xuehuaimg.com/proxy/http://www.djwservice.com/images/Sliding_bg.gif" />
</div>
</div>
<div id="test1-header" class="accordion_headings" >
<div class="oknum"><div class="bianhao">2</div><div class="biaoti">About me</div><div class="riqi">
December 2007 </div></div>
</div>
<div id="test1-content">
<div class="accordion_child">
我们首先根据您公司的实际情况对网站的颜色、字体、图片、外观等元素加以考虑。在得到您的认可后，我们将提供2个静态(非功能性)的设计作品供您选择。
我们首先根据您公司的实际情况对网站的颜色、字体、图片、外观等元素加以考虑。在得到您的认可后，我们将提供2个静态(非功能性)的设计作品供您选择。
我们首先根据您公司的实际情况对网站的颜色、字体、图片、外观等元素加以考虑。在得到您的认可后，我们将提供2个静态(非功能性)的设计作品供您选。
</div>
</div>
<div id="test2-header" class="accordion_headings" >
<div class="oknum"><div class="bianhao">3</div><div class="biaoti">Contant</div><div class="riqi">
October 2007 </div></div>
</div>
<div id="test2-content">
<div class="accordion_child">
我们首先根据您公司的实际情况对网站的颜色、字体、图片、外观等元素加以考虑。在得到您的认可后，我们将提供2个静态(非功能性)的设计作品供您选择。
我们首先根据您公司的实际情况对网站的颜色、字体、图片、外观等元素加以考虑。在得到您的认可后，我们将提供2个静态(非功能性)的设计作品供您选择。
我们首先根据您公司的实际情况对网站的颜色、字体、图片、外观等元素加以考虑。在得到您的认可后，我们将提供2个静态(非功能性)的设计作品供您选择。
我们首先根据您公司的实际情况对网站的颜色、字体、图片、外观等元素加以考虑。在得到您的认可后，我们将提供2个静态(非功能性)的设计作品供您选择。
</div>
</div>
</div>
</body>
</html>

提示:可以修改后运行

<< 人民网网警特效JSwindow.open的例子和使用方法以及参数说明（完整版） >>

查看所有评论