鼠标绑定事件

飞鱼同学

已于 2022-04-08 22:16:55 修改

阅读量316

点赞数

分类专栏：前端页面文章标签： js javascript css html

于 2021-02-01 22:47:12 首次发布

本文链接：https://blog.csdn.net/qq_42487459/article/details/113531551

版权

前端页面专栏收录该内容

15 篇文章 0 订阅

订阅专栏

鼠标绑定

效果：
在这里插入图片描述

功能说明：当鼠标进入页面时，方块的位置将会跟随鼠标进行移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标的绑定</title>
		<style type="text/css">
			div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left:0;
            /*top:0;*/
        }
		</style>
	</head>
	<body>
		<h2>飞鱼同学的测试</h2>
		<div id="div"></div>
		
		<script type="text/javascript">
			//得到鼠标的x，y粥坐标
			//给div区域的位置进行赋值
			let div = document.getElementById('div');
			document.onmousemove = function(){
				console.log('测试');
				//div.clientWidth/2 +'px'; 使鼠标的位置放在方块的中间，
				div.style.left = event.clientX - div.clientWidth/2 +'px'; 
				div.style.top = event.clientY - div.clientHeight/2 +'px';
			}
			
		</script>
	</body>
</html>

飞鱼同学

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标绑定事件

鼠标绑定效果：功能说明：当鼠标进入页面时，方块的位置将会跟随鼠标进行移动<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>鼠标的绑定</title> <style type="text/css"> div{ width: 100px; height: 100px;
复制链接

扫一扫