超好玩的推盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #div1{
            width: 100px;
            height: 100px;
            background: orange;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="div1">推推推</div>
</body>
</html>
<script src="utils.js"></script>
<script>
    /*var n =12;
    switch (n){
        case 1:
            console.log(1);
            break;
        case 2:
            console.log(2);
            break;
        default:
            console.log(3);
    };*/
    var oDiv = document.getElementById('div1');
    document.onkeydown = function (e) {
        e = e || window.event;
        console.log(e.keyCode);// 记录的是键盘对应的键值码
        var l = oDiv.style;
        // var l2 = oDiv.style.left;
        switch (e.keyCode){
            case 37:
                l.left = utils.css(oDiv,'left') - 10 + 'px';
                break;
            case 38:
                l.top = utils.css(oDiv,'top') - 10 + 'px';
                break;
            case 39:
                l.left = utils.css(oDiv,'left') + 10 + 'px';
                break;
            case 40:
                l.top = utils.css(oDiv,'top') + 10 + 'px';
                break;
        }
    }

</script>

优质内容筛选与推荐>>
1、[ CodeVS冲杯之路 ] P1294
2、直接插入排序
3、css3动画 bug 2点
4、Asp.Net夜话之八：数据绑定控件
5、hibernate-mapping 配置文件范例

朋友将在看一看看到

分享想法到看一看