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

来源：互联网发布：淘宝虚假代理编辑：程序博客网时间：2024/05/17 02:49

这篇文章就是来展示一下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的位置。

阅读全文

1 0