繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
典型特效
按钮特效
页面背景
鼠标特效
时间日期
状态特效
图象特效
cookie
下拉菜单
链接特效
导航菜单
页面导航：
首页
→
网络编程
→
JavaScript
→
网页特效
→
导航菜单
→ 正文内容
超个性的导航效果
发布：dxy 字体：[
增加
减小
] 类型：转载
超个性的导航效果，
点击运行可以看到效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>测试效果</title> <style type="text/css"> <!-- body {text-align:center} table {border:1px solid #eeeeee;padding:3px 0;border-bottom-width:5px} .icon td {width:50px;height:37px;background-image:url(/upload/20071104213204237.gif)} .capt td {font:normal 11px verdana;padding:2px 0} .a {background-position-y:0px} .b {background-position-y:-37px} .c {background-position-y:-74px} .d {background-position-y:-111px} .e {background-position-y:-148px} .f {background-position-y:-185px} .g {background-position-y:-222px} .f1 {background-position-x:0px} .f2 {background-position-x:-51px} .f3 {background-position-x:-101px} .f4 {background-position-x:-153px} .f5 {background-position-x:-205px} .f6 {background-position-x:-257px} .f7 {background-position-x:-309px} --> </style> <script language="javascript"> window.onload=function(){ var t=document.getElementsByTagName('table')[0]; var cs=t.rows[1].cells,ct=t.rows[0].cells; for(var i=0;i<cs.length;i++) cssAni(cs[i],ct[i],7); } function cssAni(osrc,otarget,num,duration){ var t=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num); var s=otarget.className.replace(/.$/,''),r=/over/; osrc.onmouseover=osrc.onmouseout=function(e){ n=r.test((e||event).type)?1:-1; if(!t) t=setInterval(function(){ if((c==1||c==num)&&((d==n||c+n<1)||!(d=n))) return clearInterval(t),t=null; otarget.className=s+(c+=d); },i); }; } </script> </head> <body> <table> <tr class='icon'> <td class='a f1'></td> <td class='b f1'></td> <td class='c f1'></td> <td class='d f1'></td> <td class='e f1'></td> <td class='f f1'></td> <td class='g f1'></td> </tr> <tr class='capt'> <td><a href='#;'>A</a></td> <td><a href='#;'>B</a></td> <td><a href='#;'>C</a></td> <td><a href='#;'>D</a></td> <td><a href='#;'>E</a></td> <td><a href='#;'>F</a></td> <td><a href='#;'>G</a></td> </tr> </table> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
超个性的导航效果
百度中搜索更多的关于
超个性的导航效果
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
几个不错的自动收缩菜单导航效果
下一篇文章：
yahoo首页伸缩效果代码
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
麦鸡的TAB切换功能结合了javascript和css
发一个比较漂亮的选项卡动态增删的效果
一段非常好的滑动门[可感应触发或点击触发
javascript实现的又一个不错的滑动导航效
一个不错的渐显菜单
用js实现网页上模仿桌面右键菜单
javascript实现表现、结构、行为分离的选
一个不错的动感导航菜单
搜集了几个不错的下拉菜单效果
js实现的非常棒的绿色下拉透明菜单
最 近 更 新
新版本susymenu树形菜单，请大家指教、分
可以媲美Flash的JS导航菜单
javascript实现操作cookie实现的可记忆菜
用javascript实现的不错的一款网页选项卡
腾讯QQ网页在线客服，隐藏在网页一侧的隐
几个不错的自动收缩菜单导航效果
麦鸡的TAB切换功能结合了javascript和css
一个不错的渐显菜单
一个不错的动感导航菜单
用js实现的比较经典实用的触发型导航菜单
热 点 排 行
可以媲美Flash的JS导航菜单
又一个漂亮的导航栏的下拉菜单
用js实现的比较经典实用的触发型
js实现的非常棒的绿色下拉透明菜
搜集了几个不错的下拉菜单效果
腾讯QQ网页在线客服，随网页滚动
几个不错的自动收缩菜单导航效果
javascript渐变显示的雅虎中国选
javascript实现表现、结构、行为
一个不错的动感导航菜单
文章评论
共有 位脚本之家网友发表了评论我来说两句