JS实现十字坐标跟随鼠标效果
作者：laozhang 时间：2024-04-22 22:43:00
本次小编给大家带来一个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="text/html; charset=utf-8" />
<title>鼠标跟随十字JS特效代码</title>
</head>
<body style="margin: 0;">
<div id="html"></div>
<script type="text/javascript">
//
var ox = document.createElement('div');
var oy = 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);
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 || 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="https://www.aspxhome.com/" target="_blank">脚本之家</a></p>
</body>
</html>
大家在测试的时候可以根据需求来调整JS里的代码X表示横坐标，Y表示纵坐标。
在学习的时候如果还有任何疑问可以在下方的留言区讨论，感谢你对asp之家的支持。
标签：JS,十字坐标
0
投稿猜你喜欢
如何将函数的实际参数转换成数组
2010-01-11 19:59:00
PHP的mysqli_thread_id()函数讲解
2023-06-13 10:09:43
MySQL语句执行顺序和编写顺序实例解析
2024-01-26 12:39:18
Pycharm中的Python Console用法解读
2021-02-20 06:27:36
MySQL无法启动1067错误的又一种解决方法(机房断电)
2024-01-13 08:55:25
一个不错的网页拾色器
2007-09-30 19:45:00
基于PyQt5完成pdf转word功能
2022-05-17 13:06:47
jQuery初学:find()方法及children方法的区别分析
2011-02-05 10:58:00
LyScript实现计算片段Hash并写出Excel的示例代码
2021-11-20 18:41:45
简述php环境搭建与配置
2023-11-15 09:08:28
python使用正则表达式替换匹配成功的组并输出替换的次数
2022-04-05 06:35:05
Python深度学习pytorch神经网络多层感知机简洁实现
2021-08-20 17:37:43
python使用xlrd模块读写Excel文件的方法
2022-02-14 16:54:55
Python实现程序的单一实例用法分析
2023-01-08 11:38:14
python使用for循环和海龟绘图实现漂亮螺旋线
2023-08-01 10:38:57
MySQL数据库操作DQL正则表达式
2024-01-14 13:04:48
对Python中小整数对象池和大整数对象池的使用详解
2023-02-17 18:13:49
php验证session无效的解决方法
2023-08-15 06:52:39
golang 如何通过反射创建新对象
2024-04-27 15:24:38
Python大数据用Numpy Array的原因解读
2023-06-19 05:14:00
