滑动门技术（滑动门技术可以用来制作）

本篇文章给大家谈谈滑动门技术，滑动以及滑动门技术可以用来制作对应的门技知识点，希望对各位有所帮助，术滑不要忘了收藏本站喔。动门

CSS中的制作滑动门技术 这个真的很难理解。麻烦给解释一下！滑动

滑动门就是门技可以推拉的门。

用定义背景图片位置的术滑方法，实现背景像推拉门一样在容器中移动的动门效果，就叫滑动门技术。技术通常图片尺寸都比容器尺寸大，可用以便实现想要的制作效果。

滑动门是怎么做的啊

滑动门可以用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;}

--

/style

script type="text/javascript" language="javascript"

//!cdata[

function g(o){ return document.getElementbyId(o);}

function HoverLi(n){

//如果有N个标签，就将i=N;

for(var i=1;i=3;i++){ g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';

}

//如果要做成点击后再转到请将li中的onmouseover改成onclick;

//]]

/script

/head

body

!--把下面代码加到body与/body之间--

div class="w936"

div id="tb_" class="tb_"

ul

li id="tb_1" class="hovertab" onMouseOver="x:HoverLi(1);"

标题1/li

li id="tb_2" class="normaltab" onMouseOver="i:HoverLi(2);"

标题2/li

li id="tb_3" class="normaltab" onMouseOver="a:HoverLi(3);"

标题3/li

/ul

/div

div class="ctt"

div class="dis" id="tbc_01"内容1/div

div class="undis" id="tbc_02"内容2/div

div class="undis" id="tbc_03"内容3/div

/div

/div

/div

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

网页制作的滑动门技术

陶宝的我知道是怎么弄的 ，他的虽然不是给每个菜单设置ID 但是他给每个页面的BODY属性设置有单独ID的

滑动门技术的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于滑动门技术可以用来制作、滑动门技术的信息别忘了在本站进行查找喔。