jquery导航菜单鼠标hover导航实现背景更换效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | < !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=utf-8" /> <title>jquery导航菜单鼠标hover导航实现背景更换效果</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //擦除效果 jQuery.extend(jQuery.easing, { easeOutBack: function (x, t, b, c, d, s) { s = s || 1.3; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }); //nav初始化选中 var navCurr = $("#navCurr"); $("#navSelected").css("left", navCurr[0].offsetLeft); //nav里的链接hover效果 $("#navBd li").hover(function(){ if(!!$("#navSelected").stop(true).animate({left:$(this)[0].offsetLeft}, 400, "easeOutBack")) { $(this).siblings().removeClass("navHover").end().addClass("navHover"); $(this).find("a").hide().fadeIn(300); } }, function(){ $(this).removeClass("navHover"); $("#navCurr").addClass("navHover"); //window.setTimeout(function(){$("#navCurr").parent().addClass("navHover")},100); $("#navSelected").stop(true).animate({left:navCurr[0].offsetLeft}, 300, "easeOutBack"); } ); }) </script> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;text-decoration:none;color:#333;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} .clearfix:after{visibility: hidden; display: block; clear: both; height: 0; font-size: 0; content: ".";} .clearfix{zoom:1;} .nav {position:relative;width:700px;height:38px;overflow:hidden;line-height:38px;font-size:14px;margin:40px auto 0 auto;} .nav li{float:left;display:inline;width:100px;height:39px; ine-height:33px;text-align:center;} .nav a:hover{text-decoration:none;} #navBd{position:relative;} .navHover a{display:inline-block;color:#fff;} #navSelected{position:absolute;top:0;width:100px;height:39px; ine-height:33px;background:url(images/header.png) no-repeat 0 0;} </style> </head> <body> <div class="nav"> <div id="navSelected" class="navSelected"></div> <ul id="navBd" class="clearfix"> <li id="navCurr" class="navHover"><a href="#">网站首页</a></li> <li><a href="#">网站建设</a></li> <li><a href="#">网站维护</a></li> <li><a href="#">网站改版</a></li> <li><a href="#">网站优化</a></li> <li><a href="#">成功案例</a></li> <li><a href="#">常见问题</a></li> </ul> </div> </body> </html> |
浅唱6（微信/QQ号：909912499），欢迎分享本文，转载请保留出处！部分内容来自网络，如有侵权请联系删除处理！
相关信息
本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。
如有需要请加QQ: 909912499