点击预览效果,基于JQuery要实现这种导航菜单效果(背景色块跟随鼠标移动,高亮当前鼠标指向的链接,鼠标离开导航菜单后,背景色块移回当前导航链接)很简单,以下贴出代码,有需要的直接复制粘贴。
<!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <title>背景色跟随鼠标移动高亮当前鼠标指向的链接特效-网站程序网</title> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function() { var $t, leftX, newWidth; $('.menu ul').append('<div class="block"></div>'); var $block = $('.block'); $block.width($(".current").width()).css('left', $('.current a').position().left).data('rightLeft', $block.position().left).data('rightWidth', $block.width()); $('.menu ul li').find('a').hover(function() { $t = $(this); leftX = $t.position().left; newWidth = $t.parent().width(); $block.stop().animate({ left: leftX, width: newWidth },300); }, function() { $block.stop().animate({ left: $block.data('rightLeft'), width: $block.data('rightWidth') },300) }) }) </script> <style type="text/css"> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;list-style:none;outline:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%} nav{width:100%;height:40px;background:#333;box-shadow:0 0 2px} nav ul{position:relative;width:960px;height:40px;margin:0 auto} nav ul li{float:left} nav ul li a{position:relative;z-index:2;display:block;padding:0 10px;line-height:40px;color:#fff;text-decoration:none;font-size:0.875em} nav .block{position:absolute;z-index:0;left:0;bottom:0;width:48px;height:40px;background:red} </style> </head> <body> <nav class="menu"> <ul> <li class="current"><a href="">网站首页</a></li> <li><a href="">网站模板</a></li> <li><a href="">phpcms常见问题</a></li> <li><a href="">dedecms常见问题</a></li> <li><a href="">网站建设常见问题</a></li> <li><a href="">CSS3</a></li> </ul> </nav> </body> </html>