js裏div隨著鼠標一起移動
阿新 • • 發佈：2017-07-05
hang chang num pan cti win switch ret sem
<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>
js裏div隨著鼠標一起移動