jquery导航菜单鼠标hover导航实现背景更换效果 $(fu" />
当前位置: 首页 >wordpress

jquery导航菜单鼠标hover导航实现背景更换效果

wordpress 2018-12-7 阅读量: 112 TAG:
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>

来源:(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!

相关信息

本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。

如有需要请加QQ: 909912499