zoukankan      html  css  js  c++  java
  • JS延时提示框

    <!DOCTYPE html>

    <html>

     

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    #div1 {

    height: 100px;

    width: 100px;

    background-color: red;

    }

     

    #div2 {

    height: 300px;

    width: 300px;

    background-color: gray;

    display: none;

    }

     

    div {

    margin: 10px;

    float: left;

    }

    </style>

    </head>

     

    <body>

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

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

    </body>

    <script type="text/javascript">

    //当鼠标移出div1的时候,提示框不立刻消失,延时消失

    //当鼠标移入提示框时候,提示框始终保持显示状态,

    //当鼠标移出提示框时候,提示框延时消失

    var sDiv = document.getElementById("div1");

    var bDiv = document.getElementById("div2");

    var timer = null;

    // sDiv.onmouseover=function(){

    // clearTimeout(timer);

    // bDiv.style.display="block";

    // }

    // sDiv.onmouseout=function(){

    // timer=setTimeout(function(){

    // bDiv.style.display="none";

    // },3000);

    //

    //

    // }

    // bDiv.onmouseover=function(){

    // clearTimeout(timer);

    // }

    // bDiv.onmouseout=function(){

    // timer=setTimeout(function(){

    // bDiv.style.display="none";

    // },3000) 

    // }

     

    //函数合并,上面是未合并之前的详细代码

    div1.onmouseover = div2.onmouseover = function() {

    clearTimeout(timer);

    div2.style.display = "block";

    }

    div1.onmouseout = div2.onmouseout = function() {

    timer = setTimeout(function() {

    div2.style.display = "none";

    }, 3000)

    }

    </script>

     

    </html>

  • 相关阅读:
    svg圆弧进度条demo
    canvas圆弧、圆环进度条实现
    angularjs与pagination插件实现分页功能
    CSS布局:居中的多种实现方式
    新闻滚动demo
    移动端rem设置字体
    angularjs自定义指令通用属性详解
    浅谈angularjs绑定富文本出现的小问题
    jquery.validate使用攻略(表单校验)
    Typescript 享元模式(Flyweight)
  • 原文地址:https://www.cnblogs.com/niuniudashijie/p/6080093.html
Copyright © 2011-2022 走看看