1顶

一段非常好的滑动门效果

稿源：互联网 2022-04-09 15:16:20 点击： 3699 撤稿纠错

非常好的滑动门特效，可感应触发或点击触发，兼容IE7 IE6 FireFox Opera

以下讨论的是和特效相关的一段非常好的滑动门效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br><title>我的滑动门</title><br><style type="text/css"><br>body{<br>color: #000;<br>font-family: "宋体", arial;<br>font-size: 12px;<br>background: #fff;<br>text-align: center;<br>margin: 0;<br>}<br>.nTab{<br>float: left;<br>width: 960px;<br>margin: 0 auto;<br>border-bottom:1px #AACCEE solid;<br>background:#d5d5d5;<br>background-position:left;<br>background-repeat:repeat-y;<br>margin-bottom:2px;<br>}<br>.nTab .TabTitle{<br>clear: both;<br>height: 22px;<br>overflow: hidden;<br>}<br>.nTab .TabTitle ul{<br>border:0;<br>margin:0;<br>padding:0;<br>}<br>.nTab .TabTitle li{<br>float: left;<br>width: 70px;<br>cursor: pointer;<br>padding-top: 4px;<br>padding-right: 0px;<br>padding-left: 0px;<br>padding-bottom: 2px;<br>list-style-type: none;<br>}<br>.nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}<br>.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}<br>.nTab .TabContent{<br>width:auto;background:#fff;<br>margin: 0px auto;<br>padding:10px 0 0 0;<br>border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;<br>}<br>.none {display:none;}<br></style><br><script type="text/javascript"><br>function nTabs(thisObj,Num){<br>if(thisObj.className == "active")return;<br>var tabObj = thisObj.parentNode.id;<br>var tabList = document.getElementById(tabObj).getElementsByTagName("li");<br>for(i=0; i <tabList.length; i++)<br>{<br>  if (i == Num)<br>  {<br>   thisObj.className = "active"; <br>      document.getElementById(tabObj+"_Content"+i).style.display = "block";<br>  }else{<br>   tabList[i].className = "normal"; <br>   document.getElementById(tabObj+"_Content"+i).style.display = "none";<br>  }<br>} <br>}<br></script><br></head><br><body><br><br /><br><br /><br><div align="center" style="padding-left:25px;"><br><br>  <div class="nTab"><br>    <br>    <div class="TabTitle"><br>      <ul id="myTab0"><br>        <li class="active" onmouseover="nTabs(this,0);">全部</li><br>        <li class="normal" onmouseover="nTabs(this,1);">日志</li><br>        <li class="normal" onmouseover="nTabs(this,2);">咨询</li><br>        <li class="normal" onmouseover="nTabs(this,3);">相册</li><br>        <li class="normal" onmouseover="nTabs(this,4);">商城</li><br>        <li class="normal" onmouseover="nTabs(this,5);">社区</li><br>      </ul><br>    </div><br>    <br>    <div class="TabContent"><br>      <div id="myTab0_Content0"> 000 </div><br>      <div id="myTab0_Content1" class="none">111</div><br>      <div id="myTab0_Content2" class="none">222</div><br>      <div id="myTab0_Content3" class="none">333</div><br>      <div id="myTab0_Content4" class="none">444</div><br>      <div id="myTab0_Content5" class="none">555</div><br>    </div><br>  </div><br>  <br>  <br>  <div class="nTab" style=width:288px><br>    <br>    <div class="TabTitle"><br>      <ul id="myTab1"><br>        <li class="active" onclick="nTabs(this,0);">aaa</li><br>        <li class="normal" onclick="nTabs(this,1);">bbb</li><br>        <li class="normal" onclick="nTabs(this,2);">ccc</li><br>        <li class="normal" onclick="nTabs(this,3);">单击</li><br>      </ul><br>    </div><br>    <br>    <div class="TabContent"><br>      <div id="myTab1_Content0"> 000 </div><br>      <div id="myTab1_Content1" class="none"> 111 </div><br>      <div id="myTab1_Content2" class="none"> 222 </div><br>      <div id="myTab1_Content3" class="none"> 333 </div><br>    </div><br>  </div><br>  <br></div><br></body><br></html></font><br><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于一段非常好的滑动门效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20081222384.shtml方便下次再访问哦。

·上一篇： 测试一个简单实用的下拉菜单
·下一篇： 无间断滚动的新闻文章列表

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

一段非常好的滑动门效果

文章分类LIST >>返回首页

最新游戏

最新新闻