滑动门是怎么做的啊_随笔

滑动门可以用javascript来制作，其代码如下所示：

html,body{margin:0text-align:centerover-flow:hiddenheight:100%width:100%}

ul{list-style-type:nonemargin:0px}

.ctt{height:autoclear:bothborder:1px solid #064ca1border-top:0text-align:left}

.w936{margin:2px 0clear:bothwidth:936px/*整个滑动门的宽度*/}

/*tab切换效果*/

.tb_{滑动门背景}

.tb_ ul{height:24px}

.tb_ li{float:leftmargin-right:2pxheight: 24pxline-height:1.9width: 94pxcursor:pointer}

/*用于控制显示与隐藏的css类*/

.normaltab{选中的滑动门标签背景}

.hovertab{未选中的滑动门标签背景}

.dis{display:block}

.undis{display:none}

-->

</style>

//<!cdata[

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

function HoverLi(n){

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

for(var i=1i<=3i++){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>

<ul>

标题1</li>

标题2</li>

标题3</li>

</ul>

</div>

</div>

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

您是说的滑动门效果吗？这个有很多办法可以实现。

比如先准备好下面全部内容，但只设定其中一个可见，其它隐藏。当点击上方导航栏时，就把下面相应内容的可见属性打开，别的隐藏。如此重复。

1.滑动特效只是客户端功能，所以只要本地可以正常运行，上传至服务器之后应该也是可以正常运行的。2.如果本地可以正常运行，上传到服务器却不能正常运行，请检查你的路径是否都正确，或是漏了什么文件没有上传。3.DW的检测，只是测试浏览器兼容性，而你所说的问题是，本地可以正常运行，上传至服务器无法正常运行，并没有特别指出你更换过浏览器，也就是说你在本地和服务器上都是使用同一款浏览器在浏览这个网页，所以DW的这项检测和你的根本问题无关。4.style="CURSOR: hand" 只是改变了当移动到该元素上时鼠标的样式为手的形状，

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7256702.html

滑动门是怎么做的啊

发表评论

评论列表（0条）