怎么用CSS来制作滑动门
日期：2014-05-17 浏览次数：20888 次
如何用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 "&
象网易那样的滑动门怎么制作!!!
大家讨论下~~~
------解决方案--------------------
<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 "&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
