JS实现十字坐标跟随鼠标效果
作者：laozhang 发布时间：2024-04-22 22:43:00
标签：JS,十字坐标
本次小编给大家带来一个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之家的支持。
0
投稿猜你喜欢
专家解答 通过查询任何数据库中的三个系统表，你可以获得每个表的每一个字段的默认值。下面是这个核心查询。它返回分配给当前数据库中每个用户表的默- 鼠标回调函数：def setMouseCallback(windowName, #窗口名称onMouse, &n
- 在vue项目中需要监听window窗口变化来时时计算图片的高度，于是就加了一个监听事件；确实监听到了，但是在离开当前页面进入其他页面改变窗口
- 现在大家都在讨论Web2.0 ，大家都在搞用户行为前端设计，现在注册一个ID一般只需要几秒钟，站长期望其产生高价值的UGC，形成一个只需要审
- Seaborn - 绘制多标签的混淆矩阵、召回、精准、F1导入seaborn\matplotlib\scipy\sklearn等包：impo
- 前言本文主要介绍的是利用python爬取京东商城的方法，文中介绍的非常详细，下面话不多说了，来看看详细的介绍吧。主要工具scrapyBeau
- Javascript中括号有四种语义语义1，声明数组 var ary = []; // 声明一个空数组var ary = [1,3]; //
- 前言今天装MySQL发现数据库储存默认装在了C盘，因为C盘空间本就不大，就想移动到其它盘。以下是我的操作步骤1.启动2.输入密码
- 如何做一个分页程序？ 这在ASP中确实容易实现，但需要技巧，看看下面的分页代码和说明： <angu
- 一、YAML是什么YAML是专门用来写配置文件的语言，远比JSON格式方便。YAML语言的设计目标，就是方便人类读写。YAML是一种比XML
- 错误Go 语言通过内置的错误接口提供了非常简单的错误处理机制，Error 类型是一个接口类型。type error interface {
- 本文研究的主要是Python使用requests发送POST请求的相关内容，具体介绍如下。一个http请求包括三个部分，为别为请求行，请求报
- 前言当需要将多张图像拼接成一张更大的图像时，通常会用到图片拼接技术。这种技术在许多领域中都有广泛的应用，例如计算机视觉、图像处理、卫星图像、
- 使用 Python 对数据进行更新操作对于 es 的更新的操作，不用到 Search() 方法，而是直接使用 es 的连接加上相应的函数来操
- 在python处理数据时，经常用到DataFrame和set。train=pd.read_csv('XXX.csv')#读取
- 本文实例为大家分享了python实现图片中文字分割的具体代码，供大家参考，具体内容如下1、原始图片（包含数字）：结果图：2、原始图片（包含文
- 在客户端请求的时候增加了自定义的http头，请求如下所示： 自定义http请求头var_dump(getallheaders);一
- 本文实例讲述了Python装饰器用法。分享给大家供大家参考，具体如下：写装饰器装饰器只不过是一种函数，接收被装饰的可调用对象作为它的唯一参数
- mysql数据库开机报错： InnoDB: The log sequence number in ibdata files does not
- 本文实例讲述了mysql简单实现查询结果添加序列号的方法。分享给大家供大家参考，具体如下：第一种方法：select (@i:=@i+1) a
