本次小编给大家带来一个JS的效果，实现根据浏览器的窗口大小出现十字坐标并跟随鼠标移动的效果，还可以计算出实时的坐标数值。
我们先来看一下运行后的效果图：
以下是经过小编测试后的全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="te
在本文中，我们将探讨如何使用JavaScript（JS）实现一个简单的十字坐标跟随鼠标的效果。这个效果使得用户在浏览器窗口内移动鼠标时，会显示一个十字线指示当前鼠标的精确位置，并实时更新坐标值。以下是实现这一功能的核心代码及其解析：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>鼠标跟随十字JS特效代码</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div id="html"></div>
<script>
// 创建横坐标线元素
var ox = document.createElement('div');
ox.style.width = '100%';
ox.style.height = '1px';
ox.style.backgroundColor = '#ddd';
ox.style.position = 'fixed';
ox.style.left = 0;
document.body.appendChild(ox);
// 创建纵坐标线元素
var oy = document.createElement('div');
oy.style.height = '100%';
oy.style.width = '1px';
oy.style.backgroundColor = '#ddd';
oy.style.position = 'fixed';
oy.style.top = 0;
document.body.appendChild(oy);
// 监听鼠标移动事件
document.onmousemove = function (e) {
var e = e || window.event;
var x = e.pageX;
var y = e.pageY;
// 更新横坐标线的位置
ox.style.top = y + 'px';
// 更新纵坐标线的位置
oy.style.left = x + 'px';
// 显示坐标值
document.getElementById('html').innerHTML = 'x : ' + x + '<br/>y : ' + y;
};
</script>
<p>更多代码请访问：<a href="//www.jb51.net/" target="_blank">软件开发网</a></p>
</body>
</html>
```
在这个示例中，首先我们创建了两个`div`元素，分别代表横坐标线（ox）和纵坐标线（oy）。通过设置它们的样式属性，如宽度、高度、背景颜色、定位方式等，我们可以让这两个元素看起来像两条穿过页面中心的线。
接下来，我们通过`document.onmousemove`监听鼠标的移动事件。当鼠标移动时，`onmousemove`函数会被调用，其中的`e.pageX`和`e.pageY`分别返回鼠标相对于浏览器左上角的水平和垂直像素位置。这些坐标值随后被用来更新横坐标线（ox）和纵坐标线（oy）的位置，使其始终与鼠标同步。
我们使用`document.getElementById('html')`获取一个用于显示坐标值的`div`元素，并通过`innerHTML`属性更新其内容，展示实时的鼠标坐标（x 和 y）。
这个简单的JavaScript代码实例展示了动态响应用户输入的能力，是Web开发中常见的一种交互设计。开发者可以根据实际需求调整代码，例如改变线条颜色、添加其他视觉效果或者将坐标值传递给其他JavaScript函数进行进一步处理。同时，这个例子也提醒我们，利用JavaScript可以轻松地为网页添加丰富的交互性，提升用户体验。
