div随鼠标移动

woderuiggya

于 2020-06-01 21:36:17 发布

阅读量166

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/woderuiggya/article/details/106482368

    <style>
        *{margin: 0;padding: 0}
        #box{width: 100px;height: 50px;background: pink;position: absolute}
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box=document.getElementById("box");
    window.onkeydown=function (e) {
        if(e.keyCode==39){
            var L=box.offsetLeft+10
            box.style.marginLeft=L+"px"
        }
        if(e.keyCode==37){
            var L=box.offsetLeft-10
            box.style.marginLeft=L+"px"
        }
        if(e.keyCode==38){
            var T=box.offsetTop-10
            box.style.marginTop=T+"px"
        }
        if(e.keyCode==40){
            var B=box.offsetTop+10
            box.style.marginTop=B+"px"
        }
    };
    function yidong(id) {
        var box=document.getElementById(id)

    box.onmousedown=function (ev) {
        var w=ev.clientX-box.offsetLeft;
        var h=ev.clientY-box.offsetTop;
        window.onmousemove=function (e) {
            var L=e.clientX-w;
            var T=e.clientY-h;
            box.style.left=L+"px";
            box.style.top=T+"PX"
        };
        box.onmouseup=function () {
            window.onmousemove=null
        }
    }
    }
    yidong("box")

</script>