文字或图片跟随鼠标移动或键盘控制图片移动实例（javascript实现）

最新推荐文章于 2023-01-02 01:48:07 发布

yayun0516

最新推荐文章于 2023-01-02 01:48:07 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： html javascript 鼠标控件

本文链接：https://blog.youkuaiyun.com/yayun0516/article/details/41643989

javaScript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现鼠标移动时页面上的元素随之移动的效果，并展示了通过键盘方向键控制图片移动的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.html代码如下：

<!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">
<title>鼠标移动文字跟着移动</title>
<style type="text/css">
	*{margin:0}
	#layer{
		width:100px;
		height:30px;
		position:relative;
		float:left;
		line-height:30px
	}
</style>
<script type="text/javascript">
	function move(){
		var obj = document.getElementById('layer');
		<span style="color:#ff0000;">obj.style.posLeft = event.x + 10 ;//将鼠标的X坐标当成控件的坐标
		obj.style.posTop = event.y + 10;<span style="font-family: Arial, Helvetica, sans-serif;">//将鼠标的Y坐标当成控件的坐标</span></span>
		
		
	}
	<span style="color:#ff0000;">document.onmousemove = move;</span>
</script>
</head>
<body  >
	<div id="layer">我要动</div>
</body>
</html>

在浏览器中查看时，文字就可以随着鼠标移动，原理如注释所示，比较易懂。

按下键盘上下左右控制图像代码如下：

<!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">
<title>鼠标移动文字跟着移动</title>
<style type="text/css">
	*{margin:0}
	#layer{
		width:120px;
		height:1200px;
		position:relative;
		float:left;

	}
</style>
<script type="text/javascript">
	function move(){
		var obj = document.getElementById('layer');
		if(event.keyCode == 39){
			obj.style.posLeft =+ 10 ;
		}
		if(event.keyCode == 40){
			obj.style.posTop =+ 10;
		}
                if(event.keyCode == 38){
			obj.style.posDown =+ 10 ;
		}
		if(event.keyCode == 37){
			obj.style.posRight =+10;
		}
	}
	document.onkeydown = move;
</script>
</head>
<body  >
	<div id="layer"><img src="images/default.gif"/></div>
</body>
</html>