您好！欢迎来到.Net中文社区！
[登录]
[免费注册]
[匿名投稿]
首 页
业界动态
数据库
.Net编程
Silverlight
AJAX编程
实用代码
网页标准
美工之家
热门：
网页模板
.net视频教程
JQuery
MVC
json
ExtJs
源码示例
三级联动
JQuery菜单
您现在的位置：
.Net中文社区
>>
实用代码
>>正文内容
CSS仿网易的滑动门技术
发布时间：2009年02月26日
点击数： 次
未知
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIV+CSS仿网易的滑动门技术AJAX</title> <style type="text/css"> <!-- #header { background-color: #F8F4EF; height: 200px; width: 400px; margin: 0px; padding: 0px; border: 1px solid #ECE1D5; font-family: "宋体"; font-size: 12px; } #menu { margin: 0px; padding: 0px; list-style-type: none; } #menu li { display: block; width: 100px; text-align: center; float: left; margin: 0px; padding-top: 0.2em; padding-right: 0px; padding-bottom: 0.2em; padding-left: 0px; cursor: hand; } .sec1 { background-color: #FFFFCC;} .sec2 { background-color: #00CCFF;} .block { display: block;} .unblock { display: none;} --> </style> </head> <body> <script language=javascript> function secBoard(n) { for(i=0;i<menu.childNodes.length;i++) menu.childNodes[i].className="sec1"; menu.childNodes[n].className="sec2"; for(i=0;i<main.childNodes.length;i++) main.childNodes[i].style.display="none"; main.childNodes[n].style.display="block"; } </script> <div id="header"> <ul id="menu"> <li onMouseOver="secBoard(0)" class="sec2">最新新闻</li> <li onMouseOver="secBoard(1)" class="sec1">最新文章</li> <li onMouseOver="secBoard(2)" class="sec1">最新日志</li> <li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li> </ul> <!--内容显示区域--> <ul id="main"> <li class="block">第一个内容,<a href="http://www.aspxcs.net/">.Net中文社区</a></li> <li class="unblock">第二个内容,<a href="http://www.aspxcs.net/">.Net中文社区</a></li> <li class="unblock">第三个内容,<a href="http://www.aspxcs.net/">.Net中文社区</a></li> <li class="unblock">第四个内容,<a href="http://www.aspxcs.net/">.Net中文社区</a></li> </ul> <!--内容显示区域--> </div> </body> </html> 本代码由<a href=http://www.aspxcs.net>.Net中文社区-实用代码</a>提供
随机文章推荐
js实现图片放大预览效果
JavaScript 无缝上下左右滚动加定高定宽停
功能超强大的华丽图片展示器(附源码下载)
简单方法实现不能点右键、不用CTRL+A、不能
可关闭并且能最大化的用层模拟的网页浏览器
实用的div+css选项卡
本站热点业务
更多
模板/案例展示
热门推荐
·
QQ经典JS相册效果【推荐】
·
jquery示例实现智能输入提示功能
·
仿QQ首页图片轮换效果
·
兼容所有浏览器经典JS图片滚动
·
CSS+JS 仿MSN TAB选项卡
·
jQuery图片相册展示插件
·
兼容性比较好且实用强大的弹出窗口
·
Javascript仿flash幻灯效果
·
纯div+css制作的向下弹出菜单【兼
·
前端效果图的jquery实现过程（左右
·
详解Tab(选项卡)的设计原则及应用
·
jQuery打造经典动态下滑菜单
·
图片伸缩放大功能，鼠标单击缩放
·
JS实现旋转展示效果【经典】
·
经典jQuery的对象切换插件
最近更新
·
比较喜欢的一种效果(原创)仿taobao
·
25个非常棒的jQuery滑块插件和教程
·
100个非常强大的CSS菜单教程指南
·
25个实用的jQuery Tooltip脚本
·
30个精美的jQuery幻灯片效果插件和
·
魅族官网的滑动导航菜单
·
超过 25 个华丽的 Web 日历组件
·
10 款很有创意的 jQuery 表格插件
·
20+ 个很棒的 jQuery 文件上传插件
·
13个超级有用的 jQuery 内容滚动插
·
13个超级有用的jQuery内容滚动插件
·
分享open-open AJAX开源项目中的几
·
30 个 jQuery 导航菜单插件和教程
·
常用JQuery插件整理
·
推荐10款非常有用的 Ajax 插件
