zoukankan      html  css  js  c++  java
  • 键盘控制div移动,解决抖动问题

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>键盘控制移动</title>
    <style>
    #div1{ 100px;height: 100px;background: red;position: absolute;}
    </style>
    <script src="js/move.js"></script>
    <script>
    window.onload=function () {
    var oDiv=document.getElementById('div1');
    var left=false;
    var right=false;
    var top=false;
    var button=false;
    setInterval(function () {
    if(left){
    oDiv.style.left=oDiv.offsetLeft-10+'px';
    }else if(right){
    oDiv.style.left=oDiv.offsetLeft+10+'px';
    }else if(top){
    oDiv.style.top=oDiv.offsetTop-10+'px';
    }else if(button){
    oDiv.style.top=oDiv.offsetTop+10+'px';
    }
    },30)
    document.onkeydown=function (ev) {
    var oEvent=ev||event;
    var keyCode=oEvent.keyCode;
    if(keyCode==37){
    left=true;
    }else if(keyCode==39){
    right=true;
    }else if(keyCode==38){
    top=true;
    }else if(keyCode==40){
    button=true;
    }
    }
    document.onkeyup=function (ev) {
    var oEvent=ev||event;
    var keyCode=oEvent.keyCode;
    if(keyCode==37){
    left=false;
    }else if(keyCode==39){
    right=false;
    }else if(keyCode==38){
    top=false;
    }else if(keyCode==40){
    button=false;
    }
    }

    }
    </script>
    </head>
    <body>
    <div id="div1"></div>
    </body>
    </html>
  • 相关阅读:
    hdu 4474 转化为bfs + 一个巧妙的剪枝~
    数据结构几类排序的总结和完整代码 待续。。
    poj 2135 Farm Tour
    hdu 4374 (单调队列+dp)
    poj2391 Ombrophobic Bovines 拆点连边要注意
    hdu3507
    hdu1506
    poj2175
    poj3308
    poj3155 Hard Life
  • 原文地址:https://www.cnblogs.com/strivinghu/p/5949306.html
Copyright © 2011-2022 走看看