JavaScript | 鼠标悬停动态弹出浮动窗口显示图片 | clientX, clientY, scrollLeft, scrollTop

动态弹出浮动窗口显示图片的效果是这样子的：

不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js弹出窗</title>

	<style>
		a{
			float: left;
			margin-left:30px;
			margin-top: 50px;
		}
		img{
			width:400px;
			border:black 1px solid;
		}
		#image{
			position: absolute;
			display: none;
		}
	</style>

	<script>
		//显示图片
		function displayImg() {
			var img = document.getElementById("image");

			var x = event.clientX + document.body.scrollLeft + 20;
			var y = event.clientY + document.body.scrollTop - 5; 

			img.style.left = x + "px";
			img.style.top = y + "px";
			img.style.display = "block";
		}

		//图片消失
		function vanishImg(){
			var img = document.getElementById("image");
			img.style.display = "none";
		}
	</script>
</head>

<body>
	
	<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >
		鼠标移至这里显示图片
	</a>

	<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >
		鼠标移至这里显示图片
	</a>

	<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >
		鼠标移至这里显示图片
	</a>

	<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >
		鼠标移至这里显示图片
	</a>


	<!--动态显示的图片-->
	<div id="image">
		<img src="XXXX.png" alt=""><!--如果加上AJAX就可以根据不同的超链接来显示不同的图片了-->
	</div>

</body>
</html>

这段代码很简单，基本谁都看得懂。不过其中有两个概念很容易被混淆，一个是 clientX 和 clientY，另一个是 scrollLeft 和 scrollTop。这两个属性经常使用，通过这两个属性，一个网页中的所有坐标尽在掌握之中。

（1）clientX 和 clientY 需配合 event 使用，用于触发鼠标事件时，获取鼠标在网页中的横和纵坐标。用W3C的解释是，clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标；clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标。

（2）scrollLeft 和 scrollTop 常常配合 body 来使用，其中 scrollLeft是网页被卷去的左，scrollTop 是网页被卷去的高。问题来了，什么是“被卷去”？其可以理解为你看一个内容丰富的网页时，用鼠标往下滚轮滚动后，网页会有一部分被卷走了，然后出现往下新的部分。根据这一特性，通过 clientX + scrollLeft 就可以获取到当前鼠标基于整个网页的横坐标，通过 clientY + scrollTop 就可以获取到当前鼠标基于整个网页的纵坐标。

这段代码的核心是，设置要弹出的图片DIV为绝对定位，然后在js中动态修改样式中的 left 和 top 属性来控制DIV在网页中的显示位置。

JavaScript | 鼠标悬停动态弹出浮动窗口显示图片 | clientX, clientY, scrollLeft, scrollTop

猜你喜欢