6.28 学习内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;
           padding:0;}

        .box{width:100px;
            position:absolute;
            background-color:red;
            height: 100px;}

    </style>
</head>
<body>
<div class="box">
</div>

<script>
    window.onload=function () {

        var box = document.getElementsByClassName("box")[0];
        var left = 0;
        var top = 0;
        document.onkeydown = function (ev) {
            var oEvent = window.event || ev;
            // alert(oEvent.keyCode)
            switch (oEvent.keyCode) {
                case 37:
                    left -= 10;
                    box.style.left = left + "px";
                    break;
                case 38:
                    top -= 10;
                    box.style.top = top + "px";
                    break;
                case 39:
                    left += 10;
                    box.style.left = left + "px";
                    break;
                case 40:
                    top += 10;
                    box.style.top = top + "px";
                    break;
            }
        }
    }
</script>

</body>

</html>

//送一个.小的

<div class="head">
</div>
<input class="aaa" type="button" value="提交" >

<script>

    var aaa=document.getElementsByClassName("aaa")[0];
    aaa.onclick=function () {
     if(document.documentElement.scrollTop){
         width=setInterval(function(){
             document.documentElement.scrollTop=document.documentElement.scrollTop-100;
             if(document.documentElement.scrollTop==50){
                 // alert(document.documentElement.scrollTop)
                 document.documentElement.scrollTop=0;
                 clearInterval(width)
             }
         },100)

     }
    }

</script>

// 滚动条渐变向上.

// var box=document.getElementById("box");
    //offsetTop=top//div内左上角
    //offsetList=left;
    //offsetWidth;
    //offsetHeight;//包括padding和border

    //返回顶部.
    //<h1 style="height:2000px">
    //<script>
    //获取
    //document.documentElement.scrollTop="500"//兼容
    //document.body.scrollTop="500"//ie兼容. 
    //onkeydowm//键盘事件
    //document.onkeydown.function(ev){
    //var oEvent =window.enent||ev;
    //oEvent.keyCode

    //console.log(document.documentElement.scrollTop)
    //
    // box.onmousedown=function ()
    //     document.onmousemove=function(out){
    //
    //         box.style.left=out.clientX+"px";
    //         box.style.top=out.clientY+"px";
    //     }
    // }
    // document.onmouseup=function(){
    //     document.onmousedown=null;
    //     document.onmousemove=null;
    // }



    //球
    // var div=document.getElementsByTagName("div");
    //    document.onmousemove=function (that) {
    //
    //     for(i=0;i<div.length;i++){
    //
    //         var thats=window.event||that
    //         var x=thats.clientX;
    //         var y=thats.clientY;
    //
    //         div[i].style.transition=0.08*i+"s";
    //         div[i].style.top=y+'px';
    //         div[i].style.left=x+'px';
    //     }
    // }


       var oDiv=document.getElementsByTagName("div");
          document.onmousemove=function (ev) {
              var events=window.event||ev;
              for(i=oDiv.length-1;i>0;i--){
                  oDiv[i].style.top=oDiv[i-1].style.top;
                  oDiv[i].style.left=oDiv[i-1].style.left;
              }
                  oDiv[i].style.top=events.clientY+"px";
                  oDiv[i].style.left=events.clientX+"px";
          }
          setInterval(document.onmousemove=function (ev) {
              var events=window.event||ev;
              for(i=oDiv.length-1;i>0;i--){
                  oDiv[i].style.top=oDiv[i-1].style.top;
                  oDiv[i].style.left=oDiv[i-1].style.left;
              }
              oDiv[i].style.top=events.clientY+"px";
              oDiv[i].style.left=events.clientX+"px";
          },100)
</script>

猜你喜欢