滑动门是怎么做的啊

谢谢啊

2025-03-09 07:17:50

推荐回答（4个）

回答1：

滑动门可以用javascript来制作，其代码如下所示：
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
ul{list-style-type:none; margin:0px;}
.ctt{height:auto;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*整个滑动门的宽度*/}
/*tab切换效果*/
.tb_{滑动门背景}
.tb_ ul{height:24px;}
.tb_ li{float:left; margin-right:2px;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/*用于控制显示与隐藏的css类*/
.normaltab{选中的滑动门标签背景}
.hovertab{未选中的滑动门标签背景}
.dis{display:block;}
.undis{display:none;}
-->

标题1

标题2

标题3

内容1

内容2

内容3

滑动门的种类有很多很多，从简单的几行JS代码生成的滑动门复杂至使用jQuery效果库实现各种各样的切换效果的都有。网页制作中，很多时候需要充分利用空间。这时候需要使用滑动门这种简单而实用的技术。

回答2：

这个也不好说
给你一个比较简单又好的代码给你看看吧

滑动门技术

流行音乐

美女写真

平面设计

网络学堂

恋爱宝典

站长学院

流行音乐的内容

美女写真的内容

平面设计的内容

网络学堂的内容

恋爱宝典的内容

站长学院的内容

回答3：

　　网页制作中，很多时候需要充分利用空间。这时候就需要使用滑动门这种简单而实用的技术。
　　滑动门的种类有很多很多，从简单的几行JS代码生成的滑动门复杂至使用jQuery效果库实现各种各样的切换效果的都有。下面将提供一个简单的滑动门代码，给大家一点制作思路。
　　JS源码
　　{script type="text/javascript"} function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementByIdx_x_x(name+i); var con=document.getElementByIdx_x_x("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } {/script}

　　以上源码是在互联网上搜索回来的，网上有很多像这样的简单滑动门JS，如果有更加特别的效果，大家可以使用jQuery。
　　HTML源码
　　

Tab1
Tab2
Tab3

Tab1 Title

Tab1 Content

HelloWorld!

　　滑动门主要结构，外层有个div（id＝Tab）作外层容器，滑动门分上下两层，id为menubox和Contentbox，分别容纳点击菜单和菜单内容。
　　命名规则说明：点击菜单的id需要定义为menu#（#为数字），菜单内容的id定义为con_menu_#（#为数字）。以上命名是根据JS中的定义而命名的。
　　属性说明：
　　1.除首个菜单内容的DIV容器不用添加 style="DISPLAY: none" 外，其他菜单都需要添加以上属性。
　　2.onmouseover="setTab('menu',2,3)"中的参数说明：'menu'即li的id中的menu,2即是id中的序号，3则是点击菜单的总数。
　　CSS源码
　　#tabs { width:540px; margin:10px auto; overflow:hidden; } .Menubox { height:35px; border:1px solid #999; background:#CCC; } .Menubox ul { list-style:none; margin:0; padding:0; position:relative; } .Menubox ul li { font: 15px/35px "微软雅黑","华文细黑",Tahoma,Sans-serif; float:left; display:block; cursor: pointer; width:120px; text-align:center; color:#000; border-right:1px solid #999; } .Menubox ul li span { display:block; border:1px #FFF solid; } .Menubox ul li.hover { background:#FFF 4px 4px; color:#147AB8; font-weight:700; } .Contentbox { margin:0px; padding:5px 13px; height:180px; font: 13px/150% Tahoma,"宋体",Sans-serif; background:#F5F5F5; border:1px #999 solid; border-top:none; }

　　以上CSS代码定义都比较简单，对应的是相应容器中的元素属性。
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　onmouseover="javascript:showDiv2('hott',1,5);">系统方案
class=span4 onMouseOver="javascript:showDiv2('hott',2,5);">工程施工
id=hottnav3 class=span4
onmouseover="javascript:showDiv2('hott',3,5);">常用范本
class=span4 onMouseOver="javascript:showDiv2('hott',4,5);">驱动下载
id=hottnav5 class=span4
onmouseover="javascript:showDiv2('hott',5,5);">产品手册

· [field:title]

回答4：

随着滑动门工艺的进步，阳台门也可以采用滑动门，这样的设计增大了采光的面积，很有情趣。有些设计师还会在玄关装置滑动门，阻挡一些房型设计不当导致的视觉引导（如大门能直视卧室、卫生间等情形）。但是，本来空间就不大，两道门显得很封闭，这一点值得注意。

种类

　　滑动门其实不是新物件了，但由于工艺问题，滑轮和滑轨的质量不可靠，门板变形、推拉不畅、严重噪音等问题就时有出现，大大损伤了人们使用滑动门的热情。

　　如今滑动门进入了专业化生产的阶段，产品质量的提升也带动了滑动门的流行。

　　在滑动门中，直轨式推拉门是应用最为广泛的一种，它可适用于各种区域，轨道形式又分为单轨、双轨和三轨。此外，碰角推拉门适用于拐角的区域，分为外碰和内碰两种，碰角角度分为90度和135度。

　　斜角滑动门则适用于别墅和复式房屋的顶层。折叠门主要是为较小的空间设计的，可100％展现取物空间。平开门是在滑动门的基础上延伸出的一种产品，它不需要滑轨，而是以轴为开关，形式独特。

　　壁框门是滑动门中一个重要的组成部分。共有榉木推拉门、彩色面板推拉门、时尚金属质感推拉门、露框布纹玻璃推拉门等多种。

　　购买提示

　　一、门框和门板

　　目前，市场上滑动门使用的边框材料有碳钢材料、铝钛合金材料等，其中铝钛合金材料最为坚固耐用；其次要看门板厚度，推拉门用的木板，最好选择10mm或12mm厚的板材，这样使用起来才稳定、耐用；厚度小于8mm，会显得单薄、轻飘；6mm以下厚的门板极易变形，难以达到正常使用的要求。

　　二、滑轮

　　滑动门是否能够长期使用，关键在于滑轮的质量。滑动门通常会做到2.4米以上的高度，门扇较宽，本身自重很大，如果底轮的承重力不够，会大大影响使用寿命。目前，市场上滑轮的材质有塑料滑轮、金属滑轮和玻璃纤维滑轮3种。塑料滑轮质地坚硬，但容易碎裂，使用时间一长会发涩、变硬，推拉感就变得很差，金属滑轮强度大，但在与轨道接触时容易产生噪声；玻璃纤维滑轮韧性、耐磨性好，滑动顺畅，经久耐用。

　　三、轨道

　　滑动门的魅力在与滑动，因此滑动门的五金配件很重要，这主要体现在滑轮系统及轨道的设计、制造，更重要的是二者的完美结合。好的轨道在强度设计和与滑轮接触面的光滑程度上比较好。目前滑动门的轨道有冷轧钢轨道和铝合金轨道两种。

　　四、密封性

　　为了保证两门错开合拢，所有的滑动门产品都会有间隔，一般的外置滑轮需要15毫米的间隔，这种间隔影响了滑动门的密封性。尽管多数产品都加了毛条，但不同产品所用的毛条的密疏、缝隙的大小差距还是比较大。尽量选择间隔小、毛条密的产品。

　　五、滑动效果

　　质量好坏，口说无凭证，现场检验很重要。好的滑动门在滑动时既不会太轻飘也不会太沉重，而是带有一定门的自重，滑动时没有振动，顺滑而有质感。

滑动门是怎么做的啊

Tab1 Title

Tab2 Title

Tab3 Title