楼主你在百度搜索 JS 滑门代码 就是这个效果
具体美工上面搞一搞就可以实现了
看你整体意识了
=========================
<head>
<meta name="Author" content="whyork@21cn.com" />
<meta name="Keywords" content="" />
<meta name="Description" content="Yuankai" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tableView</title>
<style type="text/css" title="">
.tabView{
width:100%;
text-align:center;
}
.tabView dt{
font-size:14px;
cursor:pointer;
float:left;
text-align:center;
height:30px;
padding-top:5px;
width:90px;
position:relative;
top:1px;
left:20px;
color:#fff;
border:1px solid #06c;
background:#06c;
position:relative;
top:15px;
z-index:1;
}
.tabView dd{
z-index:2;
clear:both;
width:100%;
margin:0px;
background:#def;
border:1px solid #06c;
height:200px;
position:relative;
top:-1px;
display:none;filter:progid XImageTransform.microsoft.gradient(gradienttype=1,startColorStr=darkblue,endColorStr=skyblue);
}
/*
.tabView dt b{
display:block;
background:#def;
position:relative;
top:1px;
}*/
.wrap{
width:700px;
height:300px;
}
.tabView .tabOn{
padding:0px;
border:1px solid #06c;
color:#333;
border-bottom:1px solid #def;
position:relative;
top:0px;
padding-top:10px;
z-index:3;
line-height:30px;
background:#def;
}
.tabView .tabOff{
}
.tabView .on{
display:block;
background:#def;
border:1px solid #06c;
}
.tabView .off{
display:none;}
body{filter:progidXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=darkblue,endColorStr=skyblue);color:white;}
</style>
</head>
<body>
<center>
<div class="wrap">
<dl class="tabView" id="dl1">
<dt class="tabOn">眼泪天堂</dt>
<dt>心开风神</dt>
<dt>互动引擎</dt>
<dt>萧萧小雨</dt>
<dt>风云突变</dt>
<dt>风染深蓝</dt>
<dt>禾火木风</dt>
<dd class="on"><br><br>没有做不到，只有想不到。</dd>
<dd><br><br>我是马甲我怕谁㊣</dd>
<dd><br><br>其实，我是一个马甲。</dd>
<dd><br><br>我把自己埋在一个世界里，一个好深好深的世界......</dd>
<dd><br><br>这图一看就不是随便拍的，必定出之专业摄影之手。</dd>
<dd><br><br>人生最后一个到达的地方是墓地，在这一个没有人情味的地方，我因为他们而来，也因为他们而去。</dd>
<dd><br><br>失去执着，将一无所有。</dd>
</dl>
</div>
<script type="text/javascript">
<!--
function $(){
var els=new Array();
for (var i=0;i<arguments.length;i++){
var el=arguments;
if(typeof el == 'string'){el=document.getElementById(el)}
if(arguments.length == 1){return el;}
els.push(element);
}
return els;
}
function $A(obj){
_a=[];
for(var i=0;i<obj.length;i++){_a.push(obj)}
return _a
}
Function.prototype.bind=function(){
var __method=this,args=$A(arguments),obj=args.shift();
return function(){return __method.apply(obj,args.concat($A(arguments)))}
}
var isIE=1&&(window.ActiveXObject);
var isFF=(/Firefox/.test(navigator.userAgent));
if (!isIE){
window.constructor.prototype.__defineGetter__("event", function(){
var o = arguments.callee.caller;var e;
while(o!=null){
e=o.arguments[0];
if(e && (e.constructor == Event || e.constructor == MouseEvent)) return e;
o=o.caller;
}
return null;
});
Event.prototype.__defineGetter__("srcElement", function (){
var node = this.target;
while (node.nodeType != 1) node = node.parentNode;
return node;
});
}
function tabObjList(id){
this.id=id;
$(id).onclick=function (){
var el=event.srcElement;
if(el.tagName!='DT'){return}
with(this){
var a3=findNode(el,'tabOn');
if(a3!=null){
a3[0].className='tabOff';
a3[1].className='off';
}
el.className='tabOn';
findNode(el).className='on';
}
}.bind(this);
$(id).onmouseover=$(id).onclick.bind(this);
this.findNode=function (el,cName){
var dl=$(this.id)
var a1=dl.getElementsByTagName('dt');
var a2=dl.getElementsByTagName('dd');
for(var n=0;n<a1.length;n++){
if(cName){if(a1[n].className==cName){return [a1[n],a2[n]]}}
else{ if(el==a1[n]){return a2[n]}}
}
return null
}
}
var tb1=new tabObjList('dl1');
</script>
<br><br>
灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌水水灌灌灌灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌水水水水水灌灌灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌水水水水水水灌灌灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌灌灌水水水水水水水水灌灌灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌水水水水水水水水水灌灌灌灌灌灌 <br />
灌灌灌灌灌灌灌水水水水灌水水水水水水水灌灌灌灌灌灌灌 <br />
灌灌灌灌灌水水水水水水灌水水水水水水灌灌灌灌灌灌灌灌 <br />
灌灌灌灌水水水水水水水灌灌水水水水灌灌灌灌灌灌灌灌灌 <br />
灌灌灌水水水水水水水灌灌灌灌灌水水灌水灌灌灌灌灌灌灌 <br />
灌水水水水水水水灌灌灌灌灌灌灌水灌水水水灌灌灌灌灌灌 <br />
灌灌水水水水水灌灌灌灌灌灌灌水水水水水水水灌灌灌灌灌 <br />
灌灌水水水水水灌灌灌灌灌灌灌水水水水水水水灌灌灌灌灌 <br />
灌灌灌水水水水灌灌灌灌灌灌灌水水水水灌水水灌灌灌灌灌 <br />
灌灌灌灌灌水水水灌灌灌灌灌水水水水水灌水水灌灌灌灌灌 <br />
灌灌灌灌灌水水水灌灌灌灌灌水水水水水灌水水灌灌灌灌灌 <br />
灌灌灌灌灌灌水水灌灌灌灌灌水水水水水水水水灌灌灌灌灌 <br />
灌灌灌灌灌灌水水灌灌灌灌灌水水水水水水水水灌灌灌灌灌 <br />
灌灌灌灌灌灌水水灌灌灌灌灌水水灌水水水水水灌灌灌灌灌 <br />
灌灌灌灌灌灌水水灌灌灌灌灌水水灌水水水水水灌灌灌灌灌 <br />
灌灌灌灌灌灌水水灌灌灌灌灌水水灌水水灌水水灌灌灌灌灌 <br />
灌灌灌灌灌灌水水灌灌灌灌灌水水灌水水灌水水灌灌灌灌灌 <br />
灌灌灌灌灌灌水水灌灌灌灌灌水灌灌水水灌水水灌灌灌灌灌 <br />
灌灌灌灌灌水水水灌灌灌灌灌水灌水水水灌水水灌灌灌灌灌 <br />
灌灌水水水水水水灌灌灌灌灌水灌水水水水水水灌灌灌灌灌 <br />
灌灌灌水水水水灌灌灌灌灌灌水灌水水灌水水灌灌灌灌灌灌 <br />
灌灌灌灌水水水灌灌灌灌灌灌灌灌水水灌水水灌灌灌灌灌灌 <br />
灌灌灌灌灌水水灌灌灌灌灌灌灌水水水灌水水灌灌灌灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌灌灌灌水水灌灌水水水灌灌灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌灌灌水水水灌灌水水水水灌灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌灌水水水灌灌灌灌水水水灌灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌水水水灌灌灌灌灌水水水水灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌水水水灌灌灌灌灌灌灌水水水灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌水水灌灌灌 <br />
灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌灌 <br />
<br><br>
</body>
</html>
===================================
你吧=号中间的代码复制到新建文本里，保存为html后缀的，就是这个效果了，当然还需要美工修改。你就看这代码改把。整体到你页面上你得修改整体的css布局。
[ 本帖最后由 kaitsao 于 2008-2-26 21:36 编辑 ] |
置顶卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主