延时器特效 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时器事件作业</title>
    <style type="text/css">
    .box{
        width: 120px;
        border: 2px solid #ededed;
        position: relative;
        padding-bottom: 20px;
    }

    .box >a{
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        margin-top: 20px;

    }
    .show_box{
        width: 100px;
        height: 100px;
        background-color: #ededed;
        position: absolute;
        left: 121px;
        top: 0px;
    }
    </style>
</head>
<body>

    <div class="box" id="box">
        <a href="#">移动弹窗</a>
        <div>内容内容</div>
        <div>内容内容</div>
        <div>内容内容</div>
        <div>内容内容</div>
        <div class="show_box" id="show_box">
          显现盒子
        </div>    
    </div>
                

</body>
<script type="text/javascript">
    var boja=document.getElementsByClassName('box')[0].children[0];  //  获取 父元素对象
    var showbox=document.getElementById('show_box');     //获取显现的box 对象
    showbox.style.display = 'none';                  //  展开对想象隐藏
    boja.onmouseover=function(){  
        showbox.style.display = 'block';      //显现子元素               // 鼠标移到父元素
        clearTimeout(time);                    //  清除延时器  time为清除延时器返回的句柄
        
    }
    showbox.onmouseover=function(){         //  鼠标移到子元素  
        clearTimeout(time);          // 清除延时器
    }




    boja.onmouseout=timefun;             //鼠标离开父元素  运行函数
    
    showbox.onmouseout=timefun;         //鼠标离开子元素  运行函数
    function timefun(){                //  函数
        time = setTimeout(function(){     //  运行延时器  并把结果付给变量   setTimeout  连个参数  第一个函数  第二个时间
            showbox.style.display = 'none';   //子对象 隐藏
            
        },500)

    }


</script>
</html>

 

posted @ 2017-11-22 11:06  Jinsuo  阅读(183)  评论(0)    收藏  举报