原生javascript实现仿QQ延时菜单

weixin_30619101

于 2018-10-25 17:33:00 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/javascripter/p/9851445.html

版权

一、实现原理

定时器和排他思想

二、代码

<!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>

转载于:https://www.cnblogs.com/javascripter/p/9851445.html

weixin_30619101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生javascript实现仿QQ延时菜单

一、实现原理定时器和排他思想二、代码<!DOCTYPE html><html><head><title></title><style type="text/css">*{margin: 0;padding: 0}.main{ width: 100p...
复制链接

扫一扫