东软学习，javascript苍蝇跟鼠标运动、鼠标上下左右键亦能控制

最新推荐文章于 2023-10-22 19:03:02 发布

不三郭四

最新推荐文章于 2023-10-22 19:03:02 发布

阅读量470

点赞数

分类专栏：东软学习笔记

本文链接：https://blog.csdn.net/u010095995/article/details/38761509

版权

东软学习笔记专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <script type="text/javascript">
   
		document.onkeydown = function(event){			
			var myImage=document.getElementById("myImage");			
			switch(event.keyCode){
				case 39:
					myImage.style.left=parseInt(myImage.style.left)+5+"px";
					break;
				case 37:
					myImage.style.left=parseInt(myImage.style.left)-5+"px";
					break;
				case 38:
					myImage.style.top=parseInt(myImage.style.top)-5+"px";
					break;
				case 40:
					myImage.style.top=parseInt(myImage.style.top)+5+"px";
					break;
			}	
		}
		flag=1
		window.document.οnclick=function(event){
			if(flag==1){
					flag=0
					document.getElementById("dcd").innerHTML="鼠标现在可以拖动啦"
				}else
				{
					flag=1
					document.getElementById("dcd").innerHTML="鼠标现在不可以拖动啦"
					}
			
			}
		window.document.οnmοusemοve=function(event){ 
		document.getElementById("dcc").innerHTML=event.clientX;
			document.getElementById("dcd").innerHTML=event.clientY;
		  if(flag == 0){
			  myImage.style.left=event.clientX+"px";
					myImage.style.top=event.clientY+"px";
			  }
			
		}
	</script>
</head>

<body>
<div id="myImage" style="left:50px;top:30px; position:absolute;">
 <img  src="images/bg.png" width="30" height="30""/>
 </div>
 <div id="dcc"></div>
  <div id="dcd"></div>
  <div id="dce"></div>
</body>
</html>

不三郭四

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
东软学习，javascript苍蝇跟鼠标运动、鼠标上下左右键亦能控制

无标题文档 document.onkeydown = function(event){ var myImage=document.getElementById("myImage"); switch(event.keyCode){ case 39: myImage.style.left=parseInt(myImage.style.lef
复制链接

扫一扫