原生javascript实现仿QQ延时菜单

一、实现原理

定时器和排他思想

 

二、代码

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{margin: 0;padding: 0}

.main{ width: 100px; height: 300px; background: #eee; float: left; margin-top: 10px; }

.box{width: 100px; height: 100px; background:orange; float: left; margin-top: 10px; margin-left:10px;display: none;}

</style>

</head>

<body>

<div class="main"></div>

<div class="box"></div>

<script type="text/javascript">

window.onload = function(){

var main = document.querySelector('.main');

var box = document.querySelector('.box');

var timer = null;

main.onmouseover = box.onmouseover = show;

main.onmouseout = box.onmouseout = hide;

function show(){

clearTimeout(timer)

box.style.display = 'block';

}

function hide(){

timer = setTimeout(function(){

box.style.display = 'none';

},500)

}

}

</script>

</body>

</html>

 

posted @ 2018-10-25 17:33  雅士伊人  阅读(254)  评论(0)  编辑  收藏  举报