一、实现原理

定时器和排他思想

二、代码

<!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. Navicat for MySQL 使用SSH方式链接远程数据库（二）

    这里我们使用SSH连接远程mysql数据库 2 SSH这种方式,可以使我们连接到远程服务器,但是现在并不能访问数据库,因为我们还没有连接到数据库 3 既然已经连接到服务器了,我们就该连接服务器上的数据 ...

  2. java throw

    自行抛出一个异常对象,抛出异常类的对象: 若throw抛出的是Runtime异常: 程序可以显示使用try...catch来捕获并处理,也可以不管,直接交给方法调用者处理: 若throw抛出Check ...

  3. fatal: Not a git repository (or any of the parent directories)

    当从github.com上面下载下了Firmware后,无意中删除了Firmware目录下的.git文件夹,再去编译就会出现:   fatal: Not a git repository (or an ...

  4. Ajax与PHP通信

    以下是HTML的Js代码 $data = { va:$('#num').text() }; $.ajax({ type: 'POST', url: "A.php", data: $ ...

  5. 2018-10-23-使用-Pandoc-把-Markdown-转-Docx

    title author date CreateTime categories 使用 Pandoc 把 Markdown 转 Docx lindexi 2018-10-23 10:56:18 +080 ...

  6. CSS 手札记

    Display:Block/Flex 宽度如果不定义会尽可能的扩充外层宽度 在内容区域使用高度百分比和固定像素高度的时候外层设overflow:auto;可以把内层的高度撑开,否则外层会比内层短一截 ...

  7. Java逻辑思维训练题

    两柱香问题题目:有两柱不均匀的香,每柱香燃烧完需要1个小时,问:怎样用两柱香切出一个15分钟的时间段?这个题的重点就是怎么切. 答案:将甲香的一头点着,将乙香的两头点着,当乙香燃烧完时,说明已经过了半 ...

  8. 盘一盘 Thread源码

    线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 继承关系图 线 ...

  9. filter 应用

    一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html Form请求参数的中文问题 1 package me.gacl.web.filter; 2 3 import ja ...

  10. Oracle 11g R2 for Win10（64位）的安装注意点

    一般我们在win10系统安装oracle11g或者10g及更低版本的oracle客户端时,都是无法安装,一般安装的时候会闪退.这是什么原因呢?其实很简单,win10出的时间比较晚,在oracle11g ...