键盘控制div的简单移动问题，急急急在线等

很明显，拿可视区作为依据判断边界是不靠谱的，你可能考虑如下的实现方式<html>
<head>
<script>var picSize=50;
var maxR = 500/picSize;
var maxC = 500/picSize;
var colorArray = ["brown","blue","red"];//建立棋盘
function makeBoard(){
var index;
var color;
var s = "";
for(r = 0; r < maxR; r++){
for(c = 0; c < maxC; c++){
index = Math.floor(Math.random() * colorArray.length);
color = colorArray[index];
s = s +
"<div style='position:absolute;background-color:" +
color + ";top:"+ r*picSize + "px;left:"+ c*picSize + "px; width:" +
picSize + "px; height:" + picSize + "px;' id = " + 'r' + r + 'c' + c +
"></div>";
}
}
s = "<div id='alldiv' style='position:relative;left:700px; width:500px; height:500px; top:100px'>" + s + "</div>";
document.getElementById("boarddiv").innerHTML = s;
}function movediv()
{
    //获取 ID 为 Box 的元素
    var oBox = document.getElementById("box");

    //申明变量
    var bLeft = bTop = bRight = bBottom = false;

    //setInterval(code, millisec) - 按照指定的周期（以毫秒计）来调用函数
    setInterval(
        function () {

            //获取 box 新的 left 距离
            if (bLeft) {
                oBox.style.left = oBox.offsetLeft - 50 + "px"
            } else if (bRight) {
                oBox.style.left = oBox.offsetLeft + 50 + "px"
            }
            //获取 box 新的 top 距离
            if (bTop) {
                oBox.style.top  = oBox.offsetTop  - 50 + "px"
            } else if(bBottom) {
                oBox.style.top  = oBox.offsetTop  + 50 + "px"
            }
            //防止溢出
            limit();
        },
    150);

    //当键盘按下的时候
    document.onkeydown = function (event) {
        //获取 event 对象
        var event = event || window.event;
        switch (event.keyCode) {
            case 37:    //键盘中左键(←)
                bLeft = true;
                break;
            case 38:    //键盘中左键(↑)
                bTop = true;
                break;
            case 39:    //键盘中右键(→)
                bRight = true;
                break;
            case 40:    //键盘中下键(↓)
                bBottom = true;
                break;
        }
        return false
    };

    //当松开键盘的时候
    document.onkeyup = function (event) {
        switch ((event || window.event).keyCode) {
            case 37:    //键盘中左键(←)
                bLeft   = false;
                break;
            case 38:    //键盘中左键(↑)
                bTop    = false;
                break;
            case 39:    //键盘中右键(→)
                bRight  = false;
                break;
            case 40:    //键盘中下键(↓)
                bBottom = false;
                break;
        }
    };

    //防止溢出
    function limit() {
var oDiv=document.getElementById('alldiv');
        //防止左侧溢出
        oBox.offsetLeft  <= 708 && (oBox.style.left = 708);
        //防止顶部溢出
        oBox.offsetTop  <= 108 && (oBox.style.top  = 108);

        //防止右侧溢出
(oBox.offsetLeft  >= oDiv.offsetWidth-oBox.offsetWidth+708)&&(oBox.style.left=oDiv.offsetWidth-oBox.offsetWidth+708+'px');
        //防止底部溢出
(oBox.offsetTop  >= oDiv.offsetHeight-oBox.offsetHeight+108)&&(oBox.style.top=oDiv.offsetHeight-oBox.offsetHeight+108+'px');
    }
};</script>
</head><body id="cano" onload="makeBoard();movediv();">
<div id="boarddiv"></div>
<div id="box" style="position: absolute; top: 108px; left: 708px; width: 50px; height:50px; background-color:black; z-index: 3;">
</div>
</body>
</html>
非常感谢呀！请问大神，如何判断小div移动后，所覆盖的div的颜色为什么？

调试易

键盘控制div的简单移动问题，急急急在线等

解决方案 »