JavaScript中鼠标移动加上相应的图片

最新推荐文章于 2023-03-09 11:37:59 发布

plannothing

最新推荐文章于 2023-03-09 11:37:59 发布

阅读量576

点赞数

分类专栏： js基础教程文章标签： js javascript html dom

本文链接：https://blog.csdn.net/plannothing/article/details/108027034

版权

本文介绍了如何使用JavaScript监听鼠标移动事件，获取鼠标位置，并在页面上动态显示对应的图片。通过event.pageX和event.pageY获取鼠标坐标。

摘要由CSDN通过智能技术生成

<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body{
			height: 2000px;
		}
		#box01{
			width: 100px;
			height: 100px;
			background-color: red;
			
			/*
			 * 开启box01的绝对定位
			 */
			position:absolute;
		}
	</style>
	<script type="text/javascript">
		
		window.onload = function(){
			
			/*
			 * 使div可以跟随鼠标移动
			 */
			
			//获取box01
			var box01 = document.getElementById("box01");
			//绑定鼠标移动事件,要给整个document
			
			document.onmousemove = function(event){
				
				//解决兼容问题
				
				event = event||window.event;
				
				//获取滚动条滚动的距离
				/*
				 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop获取
				 * 火狐等浏览器认为浏览器的滚动条是html的
				 */
				
				var  str = document.body.scrollTop || document.documentElement.scrollTop;
				var  sl = document.body.scrollLeft || document.documentElement.scrollLeft;
				console.log(str);