js裏div隨着鼠標一塊兒移動

時間 2019-11-10

原文原文鏈接

<script> 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>  <body onkeydown="keyChange(event)"> <div style="position: absolute; left: 100px; top: 100px;" id="dv"> <img src="ball.png" width="50px" height="50px" /> </div> </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。