一、实现原理

定时器和排他思想

二、代码

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

原生javascript实现仿QQ延时菜单的更多相关文章

  1. iOS仿QQ侧滑菜单、登录按钮动画、仿斗鱼直播APP、城市选择器、自动布局等源码

    iOS精选源码 QQ侧滑菜单,右滑菜单,QQ展开菜单,QQ好友分组 登录按钮 3分钟快捷创建高性能轮播图 ScrollView嵌套ScrolloView(UITableView .UICollecti ...

  2. 原生javascript开发仿微信打飞机小游戏

    今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...

  3. 仿QQ侧滑菜单<大自然的搬运工-代码不是我的>

    1.记录下效果图 2.二个工具类 package myapplication.com.myapplicationfortest.utils; import android.util.Log; /** ...

  4. 如鹏网仿QQ侧滑菜单：ResideMenu组件的使用笔记整理+Demo

    ResideMenu菜单 课堂笔记: https://github.com/SpecialCyCi/AndroidResideMenu Github:如何使用开源组件1. 下载 下载方式: 1. 项目 ...

  5. 用原生javascript模拟经典FC游戏公路争霸

    #用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...

  6. js仿QQ拖拽删除

    原生js实现仿QQ拖拽删除交互,无需任何依赖. 项目演示请看这里, gitHub请移步这里. 由于源码很长,所以贴到最下面了. 效果截图如下: 核心思想呢,就是点击圆点的时候全屏覆盖个canvas,在 ...

  7. 循序渐进实现仿QQ界面（一）：园角矩形与双缓冲贴图窗口

    印象里仿QQ界面的程序应该有很多,搜了一下,虽然出来一大堆,排除了重复的,却只有两三个,没我想象的好.经常看到CSDN上有人问,QQ这个功能怎么实现,那个界面怎么实现,归纳了一下,决定写这么一个仿QQ ...

  8. 史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS。

    重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...

  9. Android高仿qq及微信底部菜单的几种实现方式

    最近项目没那么忙,想着开发app的话,有很多都是重复,既然是重复的,那就没有必要每次都去写,所以就想着写一个app通用的基本框架,这里说的框架不是什么MVC,MVP,MVVM这种,而是app开发的通用 ...

随机推荐

  1. 【转载】Windows平台分布式架构实践 - 负载均衡

    概述 最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Linux和Mac上运行.那么大家(开发者和企业)为 ...

  2. Codeforces Round #176 (Div. 1 + Div. 2)

    A. IQ Test 模拟. B. Pipeline 贪心. C. Lucky Permutation 每4个数构成一个循环. 当n为偶数时,n=4k有解:当n为奇数时,n=4k+1有解. D. Sh ...

  3. iptables典型NAT上网

    一般做为NAT的计算机同时也是局域网的网关,假定该机有两块网卡eth0.eth1,eth0连接外网,IP为202.96.134.134:eth1连接局域网,IP为192.168.62.10 1. 先在 ...

  4. HDU 5971"Wrestling Match"（二分图染色）

    传送门 •题意 给出 n 个人,m 场比赛: 这 m 场比赛,每一场比赛中的对决的两人,一个属于 "good player" 另一个属于 "bad player" ...

  5. 2018-8-10-win10-sdk-是否向下兼容

    title author date CreateTime categories win10 sdk 是否向下兼容 lindexi 2018-08-10 19:16:53 +0800 2018-2-13 ...

  6. 机器学习——SVM

    整理自: https://blog.csdn.net/woaidapaopao/article/details/77806273?locationnum=9&fps=1 带核的SVM为什么能分 ...

  7. 关于css中浮动的理解及实际应用

    一.元素浮动的意义及使用:1. 浮动的意义:设置了浮动属性的元素会脱离普通标准流的控制,移动到其父元素中指定的位置的过程,将块级元素放在一行,浮动会脱离标准流,不占位置,会影响标准流,浮动只有左右浮动 ...

  8. linux内核指针和错误值

    很多内部内核函数返回一个指针值给调用者. 许多这些函数也可能失败. 大部分情况, 失 败由返回一个 NULL 指针值来指示. 这个技术是能用的, 但是它不能通知问题的确切特性. 一些接口确实需要返回一 ...

  9. CFEducational Codeforces Round 66题解报告

    CFEducational Codeforces Round 66题解报告 感觉丧失了唯一一次能在CF上超过wqy的机会QAQ A 不管 B 不能直接累计乘法打\(tag\),要直接跳 C 考虑二分第 ...

  10. dotnet 方法名 To 和 As 有什么不同

    在看到 dotnet 框架里面有很多方法里面用了 ToXx 和 AsXx 好像都是从某个类转换为另一个类,那么这两个方法命名有什么不同 在约定的方法命名里面,用 To 的方法表示从类 A 转为类 B ...