鼠标跟踪器

2022-05-06 html

以下示例是关于Html中包含鼠标跟踪器用法的示例代码，想了解鼠标跟踪器的具体用法？鼠标跟踪器怎么用？鼠标跟踪器使用的例子？那么可以参考以下相关源代码片段来学习它的具体使用方法。

文件名：html[英]：マウスストーカー源码类型：Html

<div class="mouse-stalker">
  <div class="inner">
  </div>
</div>

文件名：scss[英]：マウスストーカー源码类型：Html

.mouse-stalker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1px;
  height: 1px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  .inner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
  }
}

文件名：JavaScript[英]：マウスストーカー源码类型：Html

// マウスストーカー要素
const mouseStalker = document.querySelector(".mouse-stalker");

// マウスストーカー要素の座標
const stalker = {
  x: 0,
  y: 0,
};

// マウスの座標
const mouse = {
  x: 0,
  y: 0,
};

// マウスストーカーの位置を更新
document.addEventListener("DOMContentLoaded", update);

// マウスの座標を監視
document.addEventListener("mousemove", mousemove);

// 変化したマウスの座標を格納
function mousemove(e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}

// 更新処理
function update() {
  // マウスストーカー要素の座標を更新
  /*
  マウスストーカーの追従に余韻を持たせたい場合
  stalker.x += (mouse.x - stalker.x) * 0.1;
  stalker.y += (mouse.y - stalker.y) * 0.1;
  上記のように希望の数値を掛ける
  */
  stalker.x += mouse.x - stalker.x;
  stalker.y += mouse.y - stalker.y;

  // マウスストーカー要素の位置を小数点第一位まで四捨五入
  const x = Math.round(stalker.x * 10) / 10;
  const y = Math.round(stalker.y * 10) / 10;

  // マウスストーカー要素のスタイルを更新
  mouseStalker.style.transform = `translate3d(` + x + "px," + y + "px, 0)";

  // update()内でupdateを呼び出す事でループさせる
  requestAnimationFrame(update);
}

本文地址：https://www.itbaoku.cn/snippets/785421.html

上一篇：帧同步回合制游戏问题记录

下一篇：使用null coalesce偷懒加载一个属性

相关教程

TestLodge教程

TestLodge简介 - 从简单和简单的步骤学习TestLodge，从基本到高级概念，包括简介，功...

Google跟踪代码管理器教程

适用于初学者的Google跟踪代码管理器教程 - 从基本概念到高级概念，从简单而简单的步骤学习Goo...

CPanel教程

cPanel初学者教程 - 从基本到高级概念的简单简单步骤学习cPanel，其中包括概述，注册域名，...

JSP教程

初学者JSP教程 - 从简单和简单的步骤学习JSP（Java Server Pages），从基本概念...

Spring Boot教程

初学者的Spring Boot教程 - 从基本到高级概念的简单简单步骤学习Spring Boot，其...

Servlets教程

Servlet概述 - 使用此初学者教程，简单易学地学习Java Servlet，其中包含Java ...

最新源代码片段分享

用DIV标签创建

2023年3月24日

纯JS的模态

测试服务器请求

purrr_maps

直观的自定义邮政订单

Angular API调用

根据订单状态将电子邮件发送给用户

将自定义占位符添加到WooCom...

通过JS弹出元素

儿童样式表目录

对bash命令有帮助

点击复制文字

交换

空间的

显示碎片的IDEXES

求两个字符串包含 K 个不同字符...

vim命令

Ajax请求jQuery

事件ID为4624，登录类型为2...

将文本分解为不同的表

Java安全

捕获错误飞镖

求两个代表数字的字符串相乘结果

弯曲一侧 - 旁边的hacks符...

即使动态添加元素，如何点燃事件

chatgpt提示模板

内容宽度黑客

powershell等效于温弗

创建搜索并移动工作驱动器

热门代码标签

abap abc actionscript ada apache_conf applescript asciidoc asl assembly assembly_x86 autohotkey basic batchfile c c_cpp cirru clojure coffee coldfusion cpp csharp css d dart delphi diff dockerfile dot ejs elixir elm erlang excel forth fortran gdscript gitignore glsl go golang graphqlschema groovy haml handlebars haskell haxe html html_ruby ini io jade java javascript json jsoniq jsp jsx julia kotlin latex

鼠标跟踪器

相关源代码片段分享

相关文章

相关教程