css跟js高手进来帮忙做下导航栏效果？

答案:3 悬赏:60 手机版

解决时间 2021-04-16 08:42

提问者网友：嗝是迷路的屁
2021-04-15 17:57

效果如图，图片地址： http://www.58.com.cn/gz/，导航栏的动态效果看看就知道了，背景图片不需要一样，我是要知道这个效果如何实现？谢谢。

最佳答案

五星知识达人网友：渊鱼
2021-04-15 18:42

不需要js吧，css就可以：

#nav li a { width:80px; height:30px; text-align:center; font-weight:bold. background:url(1111.gif) no-repeat; display:block; }

#nav li a:hover { background:url(2222.gif) no-repeat; }

#nav li.first a { background:url(first.gif) no-repeat; }

#nav li.last a { background:url(last111.gif) no-repeat; }

#nav li.last a:hover { background:url(last222.gif) no-repeat; }

全部回答

1楼网友：酒者煙囻
2021-04-15 19:53

复制以下代码另存为.htm格式，，运行试试。。

<!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> <title>xxxx</title> <style type="text/css"> body{ font:12px/22px Verdana, Arial, Helvetica, sans-serif normal; color:#666;} .header{ min-height:96px;_height:96px; background:url

( http://www.58.com.cn/common/images/header.gif) repeat-x; position:relative; z-index:888} .w{ width:960px; margin:0 auto; overflow:hidden; clear:both; position:relative; z-index:222} .header .w{ overflow:visible;} .nav{ height:40px; float:right; width:666px; padding:8px 0 0;} .nav ul{ display:block; height:40px; overflow:hidden;} .nav ul li{ float:left; width:95px; text-align:center; background:url

( http://www.58.com.cn/common/images/nav.jpg) no-repeat 0 -40px;} .nav ul li.firstc{ background:url( http://www.58.com.cn/common/images/nav.jpg) no-repeat 0 -

80px;} .nav ul li.first{ background:url( http://www.58.com.cn/common/images/nav.jpg) no-repeat 0 -

200px;} .nav ul li.current{ background:url( http://www.58.com.cn/common/images/nav.jpg) no-repeat 0

-120px;} .nav ul li.last{background:url( http://www.58.com.cn/common/images/nav.jpg) no-repeat 0 0;} .nav ul li.lastc{background:url( http://www.58.com.cn/common/images/nav.jpg) no-repeat 0 -

160px;}

.nav ul li a{ display:block; font-weight:bold; line-height:40px; font-size:14px;

color:#661207;} .nav ul li a:visited{ color:#661207;} .nav ul li.firstc a,.nav ul li.firstc a:visited,.nav ul li.current a:visited,.nav ul

li.current a,.nav ul li.current a:hover{ color:#FFF;} .nav ul li a:hover{ background:url( http://www.58.com.cn/common/images/nav.jpg) no-repeat 0

-120px; color:#FFF;} .nav ul li.firstc a:hover{background:url( http://www.58.com.cn/common/images/nav.jpg) no-

repeat 0 -80px; color:#FFF;} .nav ul li.first a:hover{background:url( http://www.58.com.cn/common/images/nav.jpg) no-

repeat 0 -80px; color:#FFF;} .nav ul li.last a:hover{background:url( http://www.58.com.cn/common/images/nav.jpg) no-repeat

0 -160px; color:#FFF;} .nav ul li.lastc a,.nav ul li.lastc a:hover{background:url

( http://www.58.com.cn/common/images/nav.jpg) no-repeat 0 -160px;color:#FFF;} .nav2 a,.nav2 a:visited,.brown{ color:#2754BB;} </style> </head> <body> <div class="header"> <div class="nav"> <ul> <li class="firstc"><a href=" http://xwolf.5d6d.com">首  页</a></li> <li><a href=" http://xwolf.5d6d.com">产品介绍</a></li> <li><a href=" http://xwolf.5d6d.com">商家展示</a></li> <li><a href=" http://xwolf.5d6d.com">客户案例</a></li> <li><a href=" http://xwolf.5d6d.com">服务中心</a></li> <li class="last"><a href=" http://xwolf.5d6d.com">代理专区</a></li> </ul> </div> </div>

</body> </html>

2楼网友：山有枢
2021-04-15 19:35

先把每个DIV做一个标识,放一个数组里,鼠标移动上去后,把this传进去,遍历数组,改变CSS样式就好了,或者直接改变背景图片,

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！