JavaScript+CSS实现流畅的线条滑动门
2011-05-04 09:48
246 查看
代码简介:
JavaScript配合CSS完成的滑动门,一大特色是线条分明,没有过多修饰背景颜色,更能看清楚滑动门的结构。
代码内容:
代码来自:http://www.webdm.cn/webcode/2de86659-c38d-4a91-ba1f-4732fb86c8ec.html
JavaScript配合CSS完成的滑动门,一大特色是线条分明,没有过多修饰背景颜色,更能看清楚滑动门的结构。
代码内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>JavaScript+CSS实现流畅的线条滑动门_网页代码站(www.webdm.cn)</title> <style> body,div,ul,li{ margin:0 auto; padding:0; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none; } .main{ clear:both; padding:8px; text-align:center; } #tabs1{ text-align:left; width:400px; } .menu1box{ position:relative; overflow:hidden; height:22px; width:400px; text-align:left; } #menu1{ position:absolute; top:0; left:0; z-index:1; } #menu1 li{ float:left; display:block; cursor:pointer; width:72px; text-align:center; line-height:21px; height:21px; } #menu1 li.hover{ background:#fff; border-left:1px solid #333; border-top:1px solid #333; border-right:1px solid #333; } .main1box{ clear:both; margin-top:-1px; border:1px solid #333; height:181px; width:400px; } #main1 ul{ display: none; } #main1 ul.block{ display: block; } </style> <script> function setTab(m,n){ var tli=document.getElementById("menu"+m).getElementsByTagName("li"); var mli=document.getElementById("main"+m).getElementsByTagName("ul"); for(i=0;i<tli.length;i++){ tli[i].className=i==n?"hover":""; mli[i].style.display=i==n?"block":"none"; } } </script> </head> <body> <form id="form1" runat="server"> <div> <div id="tabs1"> <div class="menu1box"> <ul id="menu1"> <li class="hover" onmouseover="setTab(1,0)"><a href="#">ASP</a></li> <li onmouseover="setTab(1,1)"><a href="#">PHP</a></li> <li onmouseover="setTab(1,2)"><a href="#">ASP.NET</a></li> <li onmouseover="setTab(1,3)"><a href="#">AJAX</a></li> </ul> </div> <div class="main1box"> <div class="main" id="main1"> <ul class="block"><li>ASP</li></ul> <ul><li>PHP</li></ul> <ul><li>ASP.NET</li></ul> <ul><li>AJAX</li></ul> </div> </div> </div> </div> </form> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/2de86659-c38d-4a91-ba1f-4732fb86c8ec.html
相关文章推荐
- JavaScript+CSS实现纵向滑动门菜单 ----初学者学习的好资料
- javascript+div+css滚动菜单的实现.
- [DataGrid][整理]使用JavaScript+css+DataGrid实现Item的高亮显示
- css+JavaScript实现水中倒影效果
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- JavaScript+CSS实现图片动态轮播dynamic_slider
- 纯CSS和Javascript实现的遮罩层
- 绝对经典的滑轮新闻显示(javascript+css)实现
- javascript+css好多网站用的选星星实现打分功能的函数
- JavaScript + CSS 实现更新后提示
- javascript实现动态加载CSS
- 【转】Javascript+css 实现网页换肤功能
- CSS+DIV+Javascript制作滑动门菜单技术
- 完整的html+css+javascript实现跟随鼠标移动显示选中效果
- 用javascript+css实现层级关系树,一目了然
- Javascript+CSS实现Flash动态新闻效果(pp原创)
- 用原生Javascript实现css的placeholder
- javascript使用DOM模型和CSS实现菜单的折叠和展开
- javascript+css实现可拖动层,兼容IE,FF
- 选项卡切换(纯Javascript&CSS实现)