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

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

JavaScript控制div的移动跟着鼠标一起移动div相关推荐

js实现页面上的图片跟着鼠标箭头移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
onmousedown:鼠标的按下事件 onmouseove:鼠标的移动事件 onmouseup:鼠标的松开事件思路: 想实现鼠标拖拽div移动的效果,就得先获取到div,然后给div绑定鼠标按下的 ...
CSS鼠标滑过div上移效果
CSS鼠标滑过div上移效果 css鼠标滑过div向上移动效果主要用到c3的transform属性该属性允许我们对元素进行旋转缩放倾斜或移动 1.效果展示 2.html代码 <body& ...
html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 content="width=device-width, user- ...
html页面按钮隐藏div显示,javascript 控制 DIV等html元素的显示和隐藏
1.编写 js函数 function display(id){ var traget=document.getElementById(id); if(traget.style.display==&qu ...
鼠标事件案例--带有hover样式的导航栏、div跟着鼠标移动而移动
由于这两个案例都比较简单,因此就不去过多的进行叙述,我们直接上代码看结果一.实现hover效果 <script>//创建ul标签,并设置相关样式var ul = document.cre ...
html导航怎么跟着往下滚动,javascript,html_导航要跟着鼠标滚动向下滚动，用了jquery插件但是报错，请问大牛是什么原因？，javascript,html - phpStudy...
导航要跟着鼠标滚动向下滚动,用了jquery插件但是报错,请问大牛是什么原因? 导航要跟着鼠标向下滚动,用了jquery插件但是报错,请问大牛是什么原因? 代码如下: 宝龙安信科技 logo宝龙安信 ...
鼠标拖拽盒子跟着鼠标在页面任意位置移动
注意: ● 我们让盒子跟着鼠标在页面上移动,这个移动事件绑在页面上,而不是绑在盒子上,也就是绑在document上,不能绑在div上,不然你只能鼠标在盒子身上移动,在页面上移动就没效果: ● 只有当你 ...
卡通小人的眼睛跟着鼠标动
来源 ,我做了一些改变. <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...

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

JavaScript控制div的移动跟着鼠标一起移动div相关推荐

最新文章

热门文章