动态翻滚的导航条 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(http://files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{ width:705px; list-style:none; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: 0px; } div#nav ul li{ float:left; height:32px; overflow:hidden; background-image: url(http://files.jb51.net/demoimg/200911/YL30.jpg); background-repeat: repeat-y; background-position: right 0; padding-top: 0; padding-right: 1px; padding-bottom: 0; padding-left: 0px; font-family: Arial; font-size: 12px; line-height: 32px; font-weight: bold; } div#nav ul li a{ float:left; height:100%; width: 77px; background:url(http://files.jb51.net/demoimg/200911/YL28.jpg) repeat-x; color:#fff; text-decoration:none; padding-top: 0; padding-right: 5px; padding-bottom: 0; padding-left: 5px; text-align:center; } div#nav ul li a.hover{ clear:both; background-position:0 -32px; width: 77px; } div#nav ul li.on a{ background-position:0 -32px; } div#nav ul li.nobg{background:none} /* ]]> */ 脚本之家 网页特效 工具软件 源码下载 菜单导航 层和布局 论坛社区 广告联系 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 如果大家不喜欢这个颜色，可以修改代码中的图片的颜色即可。

　　推荐阅读

　　JS溶解形式的文字切换特效

JS溶解形式的文字切换特效 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]>>>详细阅读

本文标题：javascript实现的鼠标悬停时动态翻滚的导航条

地址：http://www.17bianji.com/kaifa2/JS/27713.html

 1/2    1