js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块

就好像这功能。

代码如下

<style>
    #div1{
        width:50px;
        height:50px;
        background:red;
        margin-bottom:10px;
    }
    #div2{
        width:200px;
        height:200px;
        background:black;
        display:none;
    }
</style>

<body>
<div id="div1"></div>
<div id="div2"></div>

</body>
<script>
    window.onload=function()
    {
        var div1=document.getElementById("div1");
        var div2=document.getElementById(‘div2‘);
        var timer=null;
        div1.onmouseover= function()
        {
             div2.style.display=‘block‘;
        };

                div1.onmouseout= function()
                    {
                        clearTimeout(timer);
                       timer= setTimeout(function()
                        {
                             div2.style.display=‘none‘;
                        }, 500)
                    };
            div2.onmouseover=function()
            {
                clearTimeout(timer);
            };
            div2.onmouseout=function(){
                 timer=setTimeout(function(){div2.style.display=‘none‘;},500);
            }

    }
</script>

为什么要用延时器,

因为当移动另外一个模块时需要一定的时间,延时,鼠标能有一定的时间移到新的模块。

时间: 2024-08-07 08:20:23

js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块的相关文章

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名

angular延时函数和数据加载完才显示主要的页面、上传文件到后端、富文本框编辑框(ckeditor)

延时函数 setTimeout(()=>{ console.log("延时打印") },10000); // 延时10秒打印 //简单等数据加载完才显示主要的页面 1.先下载ngx-loading模块 npm install --save ngx-loading 2.在app.module.ts中引入NgxLoadingModule模块 import {NgxLoadingModule} from 'ngx-loading'; imports: [ BrowserModule,

JS横向延时2级下拉菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS横向延时2级下拉菜单</title> <style> body{ font-size: 12px; color: #333;} body, ul,h2{ margin:0;padding:0;} li { list-style:none;}

JS实现导航条效果——current跟随鼠标hover移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

关于js判断鼠标移入元素的方向——上下左右

一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: 对于数学不太好的我,只能上网找下看有没有人解决了.找到了如下这段: var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2))

html css &lt;input&gt; javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 :<input> l <input> 标签用于获得用户输入信息,type属性值不同,搜集方式不同.最常用的标签. n type属性 u text:文本框,单行的输入字段,用户可在其中输入文本.默认宽度为 20 个字符 u password:密码框,密码字段.该字段中的字符以黑圆显示.

Qt自定义sleep延时函数(巧妙的使用时间差,但这样似乎CPU满格,而不是沉睡)

Qt不像VC++的win32/MFC编程那样,提供了现成的sleep函数可供调用.Qt把sleep函数封装在QThread类中.子线程可以调用sleep函数.但是如果用户想在主线程实现延时功能,该怎么办呢?方法是自定义sleep延时函数.通过QDateTime来实现时间差. #include <QDateTime> void MainWindow::sleep(int msec)//自定义Qt延时函数,单位毫秒 { QDateTime last = QDateTime::currentDate

【前端小小白的学习之路】----&gt;用JS编写一个函数,返回数组中重复出现过的元素

用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: var arr = [1, 2, 3, 1, 2, 3, 4, 5]; var getRepeat = function (arr) { var obj = {}; for (var i = 0, len = arr.length; i < len; i++) { if (obj[arr[i]] == undefined) { obj[arr[i]] = 1; } else { obj[arr[i]]++; } } for (var

js中一些函数(一)【丫头, 今天去哪儿了呢,好些没有】

Math.Rondom()   ==>  0 到 1 之间的小数 Math.floor(x)  ==>  小于或者等于 x 的整数(即转换成整数后是不能比 x 大的整数) setInterval(hanshu,1000)  ==>  意思为调用下面的 hanshu(), 间隔时间为 1000 ms(毫秒) js中一些函数(一)[丫头, 今天去哪儿了呢,好些没有],码迷,mamicode.com