JavaScript控制div的移动跟着鼠标一起移动div

最新推荐文章于 2022-12-05 18:15:57 发布

Coding Sir

最新推荐文章于 2022-12-05 18:15:57 发布

阅读量9.1k

点赞数 2

分类专栏： Web前端文章标签： javascript 鼠标移动

本文链接：https://blog.csdn.net/xingfei_work/article/details/72725135

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇文章就是来展示一下js的几个事件，来完成根据aswd来控制diiv的移动，还可以跟着鼠标一起移动。
下面就是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动</title>
<script type="text/javascript">
    function move(keynum) {
        //获取屏幕宽度
        var w=screen.availWidth;
        //获取屏幕高度
        var h=screen.availHeight
        var d = document.getElementById("dv");
        //创建随机数，也就是我们的移动速度
        var speed=Math.floor(Math.random()*100);

        switch (keynum) {
            case 65://a--向左移动
                if(d.offsetLeft<5){
                    d.style.left=w/2+"px";
                }else{
                    d.style.left = d.offsetLeft - speed + "px";             
                }
            break;
            case 68://d---右移动
                if(d.offsetLeft>screen.w-speed){
                    d.style.left=w/2+"px";
                }else{
                    d.style.left = d.offsetLeft + speed + "px";
                }
            break;
            case 87://w---向上移动
                if(d.offsetTop<speed){
                    d.style.top=h/2+"px";
                }else{
                    d.style.top = d.offsetTop - speed + "px";
                }
            break;
            case 83://s---向下移动
                if(d.offsetTop>h-speed){
                    d.style.top=h/2+"px";
                }else{
                    d.style.top = d.offsetTop + speed + "px";
                }
            break;
        }
    }
    function keyChange(e){
        var keynum;
        if (window.event) // IE
        {
            keynum = e.keyCode
        } else if (e.which) // Netscape/Firefox/Opera
        {
            keynum = e.which
        }
        move(keynum);
    }
    //随着鼠标一起动
    /* document.onmousemove=function showxy(e) {
        if(!e){
            e = window.event;           
        }
        var d = document.getElementById("dv");
        d.style.left=e.clientX+"px";
        d.style.top=e.clientY+"px";
        //alert(e.clientX+","+e.clientY);
    } */
    //点击鼠标移动
    document.onmousedown=function showxy(e) {

        var d = document.getElementById("dv");
        d.style.left=e.clientX+"px";
        d.style.top=e.clientY+"px";
    }
</script>
</head>
<body onkeydown="keyChange(event)">
    <div style="position: absolute; left: 100px; top: 100px;" id="dv">
        <img src="ball.png" width="50px" height="50px" />
    </div>

</body>
</html>

其实主要要到的事件为onkeydown:键按下事件，onmousedown鼠标点击事件，监听这些事件然后改变我们div的位置。

Coding Sir

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript控制div的移动跟着鼠标一起移动div

这篇教程就是来展示一下js的几个事件，来完成根据aswd来控制diiv的移动，还可以跟着鼠标一起移动。下面就是我的代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>移动</title><script type="text/javascript"> function move(keynum) {
复制链接

扫一扫

专栏目录