广告服务
|
收藏本页
|
设为首页
|
登录
|
注册
退出
|
管理
Alexa排名查询
|
广告代码
|
发布源码
首页
学院
源码
软件
书籍
模板
图标
图片
字体
酷站
特效
工具
论坛
阿里西西通告:
ASP教程
|
PHP教程
|
JSP教程
|
.NET教程
|
CGI教程
|
XML教程
|
AJAX教程
|
HTML
|
网站重构
|
CSS教程
|
JS教程
|
网页设计
|
数据库
|
服务器
|
开发工具
|
网站运营
ASP源码下载
|
ASP.NET源码下载
|
PHP源码下载
|
JSP源码下载
|
CGI源码下载
|
FLASH源码下载
|
AJAX源码下载
|
办公OA源码
|
网店商城
|
公司网站源码
|
整站源码
代码编程
|
界面设计
|
加解密
|
开发辅助
|
浏览阅读
|
装机必备
|
IIS软件
|
FTP软件
|
安全软件
|
远程监控
|
邮件系统 |
虚拟主机 |
web服务 |
组件
|
设计软件
|
数据库
网站运营
|
ASP电子书
|
PHP电子书
|
.NET电子书
|
JSP电子书
|
CGI
|
数据库XML
|
服务器
|
HTML
|
设计教程
|
AJAX
|
JAVA/J2EE
|
C语言
|
VB
|
DELPHI
|
安全
|
其它
论坛程序模板
|
医疗网站
|
产品网页
|
商务网站
|
主机网站
|
旅游网站
|
体育
|
娱乐
|
艺术网站
|
建筑网页
|
动植食物
|
人物网站
|
教育网页
|
企业网站
|
简约
|
另类
系统
|
房屋
|
苹果
|
文件夹
|
电脑
|
影视
|
动植物
|
表情
|
系列图标
|
软件
|
文件
|
游戏
|
工具
|
CD光盘
|
交通
|
人物
|
食物
|
体育
|
国旗
|
卡通
|
标志
|
桌面图标
风景图片
|
花草图片
|
水资源图片
|
动物图片
|
美食图片
|
人物图片
|
抽象
|
民族艺术
|
静物图片
|
宇宙图片
|
建筑图片
|
装修图片
|
科技交通
|
体育图片
|
精美图片
书法家字体
|
迷你
|
金梅
|
汉仪
|
华文
|
长城
|
创艺
|
汉鼎
|
金桥
|
文鼎
|
微软
|
超世纪
|
中国龙
|
四通利方
|
华康
|
经典
|
王汉宗
|
中文
|
条形码
|
英文
|
其它
韩国酷站
|
欧美酷站
|
中国酷站
|
日本酷站
|
黑色酷站
白色酷站
|
灰色酷站
|
红色酷站
|
橙色酷站
|
黄色酷站
|
绿色酷站
|
青色酷站
|
蓝色酷站
|
紫色酷站
广告代码特效
|
导航条代码
|
菜单特效
|
日期时间
|
背景图像
|
图层样式
|
鼠标特效代码
|
页面窗口
|
色彩表格
|
文字特效
|
表单按钮
|
计数转换
|
游戏特效
|
实例特效
网站免费登陆
|
Alexa排名查询
|
广告代码下载
|
站长工具
|
查询工具
|
色彩工具
|
技术手册查询
|
WHOIS信息查询
|
PR值查询
|
收录查询
|
极品万年历
|
身份证查询
网络编程技术
|
网页设计制作
|
原创作品点评
|
程序员互动
|
求职招聘
|
服务器主机
|
域名交易
|
建站源码发布
|
网站推广
|
站长链接交换
|
站长赚钱讨论
|
交易广告信息
当前位置:
网页特效
>
网页特效演示页
菜单导航特效
日期时间特效
背景图像特效
图层样式特效
鼠标特效代码
页面窗口特效
色彩表格特效
文字特效代码
表单按钮特效
计数转换特效
游戏网页特效
实例网页特效
可刷新的JS树形菜单特效 - 网页特效代码演示 - 特效代码运行
以下是HTML网页特效代码,点击运行按钮可查看效果:
<!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+JS树型菜单,可刷新</title> <meta name="description" content="http://www.livepo.com"> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { width:180px; line-height: 24px; list-style-type: none; text-align:left; /*定义整个ul菜单的行高和背景色*/ } /*==================一级目录===================*/ #nav a { width: 160px; display: block; padding-left:20px; /*Width(一定要),否则下面的Li会变形*/ } #nav li { background:#CCC; /*一级目录的背景色*/ border-bottom:#FFF 1px solid; /*下面的一条白边*/ float:left; /*float:left,本不应该设置,但由于在Firefox不能正常显示 继承Nav的width,限制宽度,li自动向下延伸*/ } #nav li a:hover{ background:#CC0000; /*一级目录onMouseOver显示的背景色*/ } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } /*==================二级目录===================*/ #nav li ul { list-style:none; text-align:left; } #nav li ul li{ background: #EBEBEB; /*二级目录的背景色*/ } #nav li ul a{ padding-left:20px; width:160px; /* padding-left二级目录中文字向右移动,但Width必须重新设置=(总宽度-padding-left)*/ } /*下面是二级目录的链接样式*/ #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal; background:#CC0000; /* 二级onmouseover的字体颜色、背景色*/ } /*==============================*/ #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } #nav ul.collapsed { display: none; } --> #PARENT{ width:300px; padding-left:20px; } </style> </head> <body> <div id="PARENT"> <ul id="nav"> <li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">我的网站</a> <ul id="ChildMenu1" class="collapsed"> <li><a href="http://www.netany.net" target="_blank">
www.netany.net
</a></li> <li><a href="http://www.netany.net" target="_blank">
www.netany.net
</a></li> <li><a href="http://www.netany.net" target="_blank">
www.netany.net
</a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a> <ul id="ChildMenu2" class="collapsed"> <a href="http://www.netany.net" target="_blank">支付</a></li> <li><a href="#">网上支付</a></li> <li><a href="#">登记汇款</a></li> <li><a href="#">在线招领</a></li> <li><a href="#">历史帐务</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">网站管理</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="#">登录</a></li> <a href="http://www.netany.net" target="_blank">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul> </li> <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a> <ul id="ChildMenu4" class="collapsed"> <li><a href="#">登录</a></li> <a href="http://www.netany.net" target="_blank">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul> </li> </ul> </div> <div style="width:300;padding-left:30px;"> </br></br> </div> </body> </html> <script type=text/javascript><!-- var LastLeftID = ""; function menuFix() { var obj = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<obj.length; i++) { obj[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } function DoMenu(emid) { var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="") && (emid!=LastLeftID)) //关闭上一个Menu { document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; } function GetMenuID() { var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#"); if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) { _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else { _paramStr = ""; } if (_paramStr.length > 0) { var _paramArr = _paramStr.split("&"); if (_paramArr.length>0) { var _paramKeyVal = _paramArr[0].split("="); if (_paramKeyVal.length>0) { MenuID = _paramKeyVal[1]; } } /* if (_paramArr.length>0) { var _arr = new Array(_paramArr.length); } //取所有#后面的,菜单只需用到Menu //for (var i = 0; i < _paramArr.length; i++) { var _paramKeyVal = _paramArr[i].split('='); if (_paramKeyVal.length>0) { _arr[_paramKeyVal[0]] = _paramKeyVal[1]; } } */ } if(MenuID!="") { DoMenu(MenuID) } } GetMenuID(); //*这两个function的顺序要注意一下,不然在Firefox里GetMenuID()不起效果 menuFix(); --></script>
欢迎访问阿里西西网页特效代码站,js.alixixi.com
[提示:可先修改代码再按运行]
刚被其它网友点击的网页特效
特效标题
预览特效
点击
运行特效
叫你计算机“爬”着工作
运行
101
可控制的移动小窗口
运行
75
骇客帝国的感觉 (低配置的机...
运行
130
载入信息动画 每次刷新效果还...
运行
63
键盘控制窗口移动的特效
运行
34
特效代码:载入Loadbar 另一...
运行
122
网页特效:显示可移动的层并...
运行
141
仿Office 2003的工具条[网页特效]
运行
148
让屏幕抖动一阵一下的按钮
运行
52
点击按钮就可以实现自动向下...
运行
33
鼠标感应抖动的按钮,速度可...
运行
39
网页内部做个标记,以便迅速定位
运行
51
仿LightBox效果全屏提示框
运行
3210
全屏按钮
运行
80
[弹窗特效]点击单选框radio弹...
运行
1809
点击弹出提示信息时页面背景...
运行
1813
对网页滚动条的隐藏及显示控制
运行
81
仿软件浮动按钮 带连接的按钮
运行
150
正在加载网页时的进度条效果特效
运行
1373
禁止别人使用"另存为&quo...
运行
1321
仿QQ右下角弹出消息窗口特效代码
运行
2518
图片模拟滚动条网页特效
运行
1395
网页中某一区域的颜色变化
运行
45
在自己的站内建立一个GOOGLE...
运行
191
文本飞出的动画效果
运行
86
如何在网页中显示特殊字符
运行
135
JAVA-LED
运行
450
层钟表,cppl 且固定在右下角
运行
454
八种风格的时间日期
运行
304
时间日期在状态栏显示
运行
192
搜索查询面板
本月特效排行
令人震撼的图片展示效果
[运行]
简单的Ajax标签导航效果,兼...
[运行]
web2.0精致导航下拉菜单代码
[运行]
一个超酷弹出窗口的小效果
[运行]
JS仿flash动态切换(横向,带...
[运行]
一个无缝滚动代码(兼容IE、FF)
[运行]
精致导航下拉菜单
[运行]
一个伸缩效果,把innerHTML==&q...
[运行]
无间断循环滚动(兼容IE、FF)
[运行]
JS树形菜单
[运行]
更多...
本周特效排行
令人震撼的图片展示效果
[运行]
简单的Ajax标签导航效果,兼...
[运行]
web2.0精致导航下拉菜单代码
[运行]
一个超酷弹出窗口的小效果
[运行]
JS仿flash动态切换(横向,带...
[运行]
精致导航下拉菜单
[运行]
一个无缝滚动代码(兼容IE、FF)
[运行]
一个伸缩效果,把innerHTML==&q...
[运行]
无间断循环滚动(兼容IE、FF)
[运行]
JS树形菜单
[运行]
更多...
本日特效排行
flash效果的div+css导航菜单
[运行]
QQ在线客服代码,飘浮在右侧的...
[运行]
漂亮的loading加载效果特效
[运行]
可选择左右滚动的菜单,带缓动效果
[运行]
仿腾讯滔滔登陆界面的网页特效
[运行]
下滑菜单
[运行]
网页背景音乐播放器
[运行]
流畅的向上滚动新闻代码特效
[运行]
看你能坚持多少秒
[运行]
漂亮的立体表格效果特效
[运行]
更多...
网页特效即时演示功能V1.02 - 阿里西西
关于我们
·
免责声明
·
广告服务
·
版权隐私
·
联系我们
·
友情链接
·
网站地图
·
免费收录
·
本站技术QQ群:17701495
Copyright 2004-2008 © Alixixi.com
粤ICP备05097156号