如何用CSS来制作滑动门
象网易那样的滑动门怎么制作!!!
大家讨论下~~~
[解决办法]
<style>
div
{
font-size:12px;
}
#panelSlip
{
position:relative;
top:10px;
left:-180px;
width:200px;
height:300px;
overflow:hidden;
background-color:white;
}
#mainPanel
{
width:780px;
height:800px;
overflow:hidden;
border:1px solid lightblue;
}
#panelContainerLeft
{
width:180px;
height:300px;
float:left;
clear:right;
background-color:#f1fdff;
padding:10px;
padding-left:15px;
border:1px solid lightblue;
}
#panelContainerRight
{
width:20px;
height:300px;
float:left;
clear:right;
}
#buttonSlip
{
width:18px;
height:60px;
layout-flow:vertical-ideographic;
border:1px solid lightblue;
cursor:default;
padding-top:4px;
}
#panelControl
{
display:none;
border:1px solid red;
}
</style>
<div id= "mainPanel " name= "mainPanel ">
<div id= "panelSlip " name= "panelSlip ">
<div id= "panelContainerLeft " name= "panelContainerLeft ">
<div id= "panelControl " name= "panelControl ">
梦界服务
</div>
<div id= "panelControl " name= "panelControl ">
个人信息
</div>
</div>
<div id= "panelContainerRight " name= "panelContainerRight ">
<div onclick= "moveSlip(0); " id= "buttonSlip " name= "buttonSlip "> 梦界服务 </div>
<div onclick= "moveSlip(1); " id= "buttonSlip " name= "buttonSlip "> 个人信息 </div>
</div>
</div>
</div>
<SCRIPT LANGUAGE= "JavaScript ">
var ITV=-180;
var lastShow=0;
var controls= document.getElementsByName( "panelControl ");
controls[lastShow].style.display= "block ";
function moveSlip(objID)
{
if(ITV==-180)
{
ITV=window.setInterval( "slip(10,-10) ", "5 ", "JavaScript ");
}
else
{
if(objID==lastShow)
{
ITV=window.setInterval( "slip(-10,-180) ", "5 ", "JavaScript ");
}
}
showControl(objID);
}
function showControl(objID)
{
if(objID!=lastShow)
{
controls[objID].style.display= "block ";
controls[lastShow].style.display= "none ";
lastShow=objID;
}
}
function slip( x,pos)
{
var strL=document.getElementById( "panelSlip ").currentStyle.left ;
var intL = parseInt(strL) ;
window.status=intL;
if(intL!=pos)
{
intL+=x;
document.getElementById( "panelSlip ").style.left = intL + "px ";
}
else
{
window.clearInterval(ITV);
ITV=pos;
}
}
</SCRIPT>
[解决办法]
<HTML>
<HEAD>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<TITLE> Tab控件 </TITLE>
<style>
td,div,body
{
font-size:12px;
}
#TabControl .unselect
{
text-align:center;
cursor:hand;
padding:5px;
background-Color:#eeeeee;
border:1px solid lightblue;
cursor:default;
}
#TabControl .selected
{
text-align:center;
border-top:1px solid lightblue;
border-left:1px solid lightblue;
border-right:1px solid lightblue;
border-bottom:1px solid white;
background-Color:white;
padding:5px;
cursor:default;
}
#TabControl .blank
{
border-top:1px solid white;
border-left:1px solid white;
border-right:1px solid white;
border-bottom:1px solid lightblue;
background-Color:white;
}
#abdomen
{
border-top:0px;
border-left:1px solid lightblue;
border-right:1px solid lightblue;
border-bottom:1px solid lightblue;
padding:10px;
height:200px;
}
#container
{
width:100%;
display:none;
}
#container .menu
{
border:1px solid lightblue;
margin:5px;
}
</style>
</HEAD>
<BODY >
<table cellspacing= "0 " cellpadding= "0 " id= "TabControl " width= "100% ">
<tr>
<td width= "5% " class= "blank " nowrap > </td>
<td width= "5% " nowrap class= "unselect "> 灰豆 </td>
<td width= "5% " nowrap class= "unselect "> 大笨狼 </td>
<td width= "5% " nowrap class= "unselect "> 稻草人 </td>
<td width= "80% " class= "blank " > </td>
</tr>
</table>
<div id= "abdomen " >
<div id= "container " name= "container " >
内容1
</div>
<div id= "container " name= "container " > 内容2 </div>
<div id= "container " name= "container " > 内容3 </div>
</div>
<SCRIPT LANGUAGE=javascript>
var tabs=document.getElementById( "TabControl ").rows[0].cells;
var containers=document.getElementsByName( "container ");
var selecedID=1;
show(0);
for(n=1;n <tabs.length-1;n++)
{
tabs[n].onclick=new Function( "show( " + (n-1) + ") ");
}
function show(x)
{
tabs[selecedID].className= "unselect ";
containers[selecedID-1].style.display= "none ";
containers[x].style.display= "block ";
selecedID=x+1;
tabs[selecedID].className= "selected ";
}
</SCRIPT>
</BODY>
</HTML>
