妙味课堂基础篇0_4代码

1、说明框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style type="text/css">
    #div1{
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #ccc;
    }
    #div2{
        position: absolute;
        display: none;
        left:210px;
        top: 10px;
        width: 100px;
        height: 100px;
        background-color: #666;
    }
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    var timer;
    div1.onmouseover = function(){
        div2.style.display = "block";
        console.log("div1over");
        clearTimeout(timer);
    }
    div1.onmouseout = function(){
                console.log("div1out");
        timer = setTimeout(function(){div2.style.display = "";},300);
    }    
    div2.onmouseover = function(){
        div2.style.display = "block";
                console.log("div2over");

        clearTimeout(timer);
    }
    div2.onmouseout = function(){
                console.log("div2out");

        timer = setTimeout(function(){div2.style.display = "";},300);

    }
</script>
</body>
</html>

 2.div块移动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style type="text/css">
    #div1{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #ccc;
        left: 0;
    }
</style>
</head>
<body>
<button id="btn1">移动</button>
<button id="btn2">停止</button>
<button id="btn3">归零</button>
<div id="div1">
</div>
<script type="text/javascript">
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    var btn3 = document.getElementById("btn3");
    var div1 = document.getElementById("div1");
    btn1.onclick = function(){
        timer = setInterval(function(){div1.style.left = div1.offsetLeft + 5 + "px";},10);
        
    }
    btn2.onclick = function(){
        clearInterval(timer);
        
    }
    btn3.onclick = function(){
        div1.style.left = 0 ;
        
    }
</script>
</body>
</html>

 

posted @ 2016-07-22 18:07  阿木木Superstar  阅读(135)  评论(0)  编辑  收藏  举报