怎么用CSS来制作滑动门
发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
如何用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>
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
CSS3的3D转换效果详解介绍
CSS3的3D转换效果详解介绍:
本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只...
-
HTML学习10:表单格式化
表单格式化,其实我也不想起这个名字的,在前面学习的HTML中有文本格式化,这次的表单和表੬...
-
CSS布局参考 IE的If条件注释使用备忘
内容提要:在CSS布局中,还常常用到IE Hack。if IE起着非常大的作用! 关键字:Div CSS IE Hack...
-
CSS3中动画transform必须要了解的Skew变化原理
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同...
-
控制非模态弹出框(showModelessDialog)唯一且随父页面关闭
网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两...
-
compass模块----Utilities----Sprites精灵图合图
css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能...
-
求前端大神帮我看下我这网站,到底是什么原因。除了ie7和火狐其他浏览器都没问题。
http://120.25.1.133/digger/index.php/Home/In...
-
各位是怎样解决屏幕的分辨率的问题的呢?
我的笔记本是15.6英寸的,我开发的网页在我的电脑上看起来比较好,但是我想换一个大的屏幕的...
-
css-----强大的效果
1 <div id="d1">你好 2 <span>aaaaaaaaa</span> 3 <div> 4 <span id="s1">bbbbbbbb</span> 5 ...
-
新手关于canvas的问题
html代码:<canvasid="canvas"></canvas>
js代码:
第一种:varcanvas=$("#canvas");
第二种:varcanvas=$("#canva...