温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Jquery 导航栏动画-防BUG漏动

发布时间:2020-07-04 16:17:49 来源:网络 阅读:347 作者:1120173856 栏目:web开发

 实现功能:

1、简单的Jquery二级导航栏,+上时间函数控制,能够防乱滑动的BUG漏动!

Jquery代码:

 

 <script type="text/javascript" language="javascript">

jQuery(document).ready(function($) {

    var delayTime = [];

    jQuery('#menu li').each(function(index) {

        $(this).hover(function() {

            var _self = this;

            delayTime[index] = setTimeout(function() {

                $(_self).find('.main').slideDown(200)

            },

            400)

        },

        function() {

            clearTimeout(delayTime[index]);

            $(".main").slideUp(200)

        })

    });

});


</script>

 

HTML代码:

 

<body>

<ul id="menu">

<li>导航1

    <div class="main">内容1</div>

    </li>

    <li>导航2

    <div class="main">内容2</div>

    </li>

    <li>导航3

    <div class="main">内容3</div>

    </li>

    <li>导航4

    <div class="main">内容4</div>

    </li>

</ul>

</body>

CSS代码:

 

<style type="text/css">

<!--

body{margin:0; padding:0;}

#menu {

float: left;

list-style-type: none;

}

#menu li {

height: 40px;

width: 200px;

float: left;

line-height: 40px;

text-align: center;

background-color: #ccc;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #fff;

position: relative;

cursor:pointer;

font-family: "微软雅黑";

}

#menu li .main {

position: absolute;

left: 0px;

top: 0px;

background-color: #FF9;

height: 300px;

width: 200px;

display: none;

}

-->

</style>

 

 

 

 

-----上传了源文件,有需要的自己下载下来看看吧!

附件:http://down.51cto.com/data/2362190
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI