溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Jquery 導(dǎo)航欄動畫-防BUG漏動

發(fā)布時間：2020-07-04 16:17:49 來源：網(wǎng)絡(luò) 閱讀：362 作者：1120173856 欄目：web開發(fā)

 實現(xiàn)功能：

1、簡單的Jquery二級導(dǎo)航欄，+上時間函數(shù)控制，能夠防亂滑動的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>導(dǎo)航1

    <div class="main">內(nèi)容1</div>

    </li>

    <li>導(dǎo)航2

    <div class="main">內(nèi)容2</div>

    </li>

    <li>導(dǎo)航3

    <div class="main">內(nèi)容3</div>

    </li>

    <li>導(dǎo)航4

    <div class="main">內(nèi)容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問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手