延时提示框

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="utf-8" />
        <title>延时提示框</title>
        <link href="">
    </head>
    <style>
        #div1 {
            float: left;
            margin-right: 10px;
            width: 50px;
            height: 50px;
            background: black;
        }
        #div2 {
            display: none;
            float: left;
            width: 200px;
            height: 200px;
            background: #0CF;
        }
    </style>
    <!--<script>
        window.onload = function() {
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            time = null;
            oDiv1.onmouseover = function() {
                clearTimeout(time);
                oDiv2.style.display = 'block';
            };
            oDiv1.onmouseout = function() {
                time = setTimeout(function() {
                    oDiv2.style.display = 'none';
                }, 500);
            };
            oDiv2.onmouseover = function() {
                clearTimeout(time);
            };
            oDiv2.onmouseout = function() {
                time = setTimeout(function() {
                    oDiv2.style.display = 'none';
                }, 500);
            };
        };
    </script>-->
    <!--简易写法-->
    <script>
        window.onload = function() {
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            time = null;
            oDiv2.onmouseover = oDiv1.onmouseover = function() {
                clearTimeout(time);
                oDiv2.style.display = 'block';
            };
            oDiv2.onmouseout = oDiv1.onmouseout = function() {
                time = setTimeout(function() {
                    oDiv2.style.display = 'none';
                }, 500);
            };
        };
    </script>

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

</html>

posted @ 2015-07-22 13:54  简单就好zyx  阅读(107)  评论(0)    收藏  举报