当前位置 >首页 > 源码 > 网页特效 > jquery导航条制作鼠标滑过flash动画导航条 +发布资源

文字广告文字广告文字广告文字广告文字广告文字广告

文字广告文字广告文字广告文字广告文字广告文字广告

文字广告文字广告文字广告文字广告文字广告文字广告

文字广告文字广告文字广告文字广告文字广告文字广告

文字广告文字广告文字广告文字广告文字广告文字广告

文字广告文字广告文字广告文字广告文字广告文字广告

文字广告文字广告文字广告文字广告文字广告文字广告

文字广告文字广告文字广告文字广告文字广告文字广告

文字广告文字广告文字广告文字广告文字广告文字广告

文字广告文字广告文字广告文字广告文字广告文字广告

jquery导航条制作鼠标滑过flash动画导航条 [复制链接]
shengshiCN

发布于2020年03月05日 0 0

jquery导航条制作鼠标滑过flash动画导航条
资源概况资源仅供学习,商用请购买正版!

适用类型:网页特效 资源大小:0.47MB 资源编号:YM-TX-001

语言编码: 系统: 颜色:

我要分享:

会员尊享

以下发布的资源,所有权归属创作者所有,本站仅提供交流学习之用,切勿用于商业用途!商用请购买正版!

1尊享内部会员交流千人群      2享受永久免费升级服务      3服务市场尊享等级折扣

4提供一次免费安装配置服务     5服务市场尊享等级折扣

调试截图
内容介绍

jquery导航条制作鼠标滑过flash动画导航条

特效描述:jquery导航条 鼠标滑过 动画导航条,

代码结构

1. 引入JS

1
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

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
<script type="text/javascript">
$(document).ready(function(){
    //实例一
    $("#menu li a").wrapInner('<span class="out"></span>' ).append('<span class="bg"></span>');
    $("#menu li a").each(function(){
        $('<span class="over">' +  $(this).text() + '</span>').appendTo(this);
    });
    $("#menu li a").hover(function(){
        $(".out",this).stop().animate({'top':'45px'},250);
        $(".over",this).stop().animate({'top':'0px'},250);
        $(".bg",this).stop().animate({'top':'0px'},120);
    },function(){
        $(".out",this).stop().animate({'top':'0px'},250);
        $(".over",this).stop().animate({'top':'-45px'},250);
        $(".bg",this).stop().animate({'top':'-45px'},120);
    });
    //实例一
    $("#menu2 li a").wrapInner('<span class="out"></span>');
    $("#menu2 li a").each(function(){
        $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
    });
    $("#menu2 li a").hover(function(){
        $(".out",this).stop().animate({'top':'45px'},200);
        $(".over",this).stop().animate({'top':  '0px'},200);
    },function(){
        $(".out",this).stop().animate({'top':'0px'},200);
        $(".over",this).stop().animate({'top':'-45px'},200);
    });
});
</script>
    <div class="demo">
        <h2>实例1、</h2>
        <div id="menu" class="menu">
            <ul>
                <li><a href="http://www.9upp.com/">网站首页</a></li>
                <li><a href="http://www.9upp.com/">项目案例</a></li>
                <li><a href="http://www.9upp.com/">售后服务</a></li>
                <li><a href="http://www.9upp.com/">技术支持</a></li>
                <li><a href="http://www.9upp.com/">联系我们</a></li>
            </ul>
        </div>
        <h2>实例2、</h2>
        <div id="menu2" class="menu">
            <ul>
                <li><a href="http://www.9upp.com/">网站首页</a></li>
                <li><a href="http://www.9upp.com/">项目案例</a></li>
                <li><a href="http://www.9upp.com/">售后服务</a></li>
                <li><a href="http://www.9upp.com/">技术支持</a></li>
                <li><a href="http://www.9upp.com/">联系我们</a></li>
            </ul>
        </div>
    </div>


上述内容于2020年03月09日进行了更新。

下载地址下载地址失效?举报有奖开通钻石会员,全站源码一折下载,还送无限量主机
解压密码:www.9upp.com 网盘提取码:(此部分付费购买后可见)

免责声明:本站资源转版权归作者所有。若有侵权请速联系,我们将会在24小时内删除,谢谢!

本文来源:盛世源码论坛 如需转载,请注明来源:www.9upp.com

本文链接:http://www.9upp.com/yuanma/show/29.html

相关文章更多
评论

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系客服