常用绑定事件，获取鼠标坐标小天使案例，鼠标移入更改背景图案例_实验二设计一个鼠标事件,更换网页背景图片。-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_71437031/article/details/126233877

本文介绍了JavaScript中常用的鼠标事件，通过实例展示了如何在鼠标移入时改变元素背景图，包括小天使效果的实现和代码展示。

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

常用事件

鼠标事件	意义
onmousedown	按下鼠标键
onmousemove	移动鼠标
onmouseout	鼠标离开某一个网页对象
onmouseover	鼠标移动到某一个网页对象上
onmouseup	松开鼠标键
onclick	单击鼠标键
ondblclick	双击鼠标键

键盘事件	意义
onkeydown	按下一个键
onkeyup	松开一个键
onkeypress	按下然后松开一个键

表单事件	意义
onfocus	获取焦点，当元素获取焦点时触发
onblur	失去焦点，当元素失去焦点时触发
onchange	改变时触发,当元素获取焦点和失去焦点时内容进行对比，如果发生了改变，则触发change事件,反之则不触发
oninput	输入框内容改变，输入框内容每发生改变时触发
reset/submit	重置事件/提交事件，这两个事件必须在form表单中才能使用

div.onclick = function(event){
	console.log(event.clientX,event.clientY);//距离浏览器视口的坐标
	console.log(event.pageX,event.pageY);//距离文档流的坐标
	console.log(event.offsetX,event.offsetY);//距离元素本身左上角的坐标
}

小天使效果图：

图片：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<img src="img/angel.gif"/>
		<script type="text/javascript">
			var img = document.querySelector("img");
			//鼠标移动事件  onmousemove
			document.onmousemove = function  (event) {
				var x = event.pageX;
				var y = event.pageY;
				img.style.top = y-50 +'px';
				img.style.left = x-30 +'px';
			}
		</script>
	</body>
</html>

效果图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 700px;
            height: 520px;
            margin: 0 auto;
            border: 1px solid #000;
        }
        
        .imgBig {
            width: 650px;
            height: 400px;
            border: 1px solid red;
            margin: 20px auto 15px;
            background-image: url(img/bg1.jpg);
            background-size: 100%;
        }
        
        img {
            width: 100px;
            height: 70px;
            margin: 0 5px;
            border: 1px solid red;
        }
        
        .imgBig:hover {
            opacity: 0.7;
        }
        
        img:hover {
            opacity: 0.7;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="imgBig">

        </div>
        <img src="img/bg1.jpg" alt="">
        <img src="img/bg2.jpg" alt="">
        <img src="img/bg3.jpg" alt="">
        <img src="img/bg4.jpg" alt="">
        <img src="img/bg5.jpg" alt="">
        <img src="img/bg6.jpg" alt="">
    </div>
    <script>
        var imgBig = document.querySelector(".box div");
        var img = document.querySelectorAll("img")
        for (var i = 0; i < img.length; i++) {
            img[i].onmouseover = function() {
                imgBig.style.backgroundImage = "url(" + this.src + ")"
            }
        }
    </script>
</body>

</html>