百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

有意思的鼠标指针交互探究

liuian 2025-01-11 15:10 34 浏览

今天，来实现这样一个有意思的交互效果：

将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。

修改鼠标样式

首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：

正常而言应该是这样：

当然，这里比较简单，在 CSS 中，我们可以通过 cursor 样式，对鼠标指针形状进行修改。

利用cursor修改鼠标样式

cursor CSS 属性设置鼠标指针的类型，在鼠标指针悬停在元素上时显示相应样式。

cursor: auto;
cursor: pointer;
...
cursor: zoom-out;
/* 使用图片 */
cursor: url(hand.cur)
/* 使用图片，并且设置 fallback 兜底 */
cursor: url(hand.cur), pointer;

这个大家应该都清楚，通常而言，在不同场景下，选择不同鼠标指针样式，也是一种提升用户体验的手段。

当然，在本交互中，我们并非要将 cursor 光标设置成任一样式，刚好相反，我们需要将他隐藏。

通过cursor: none隐藏光标

在这里，我们通过 cursor: none 隐藏页面的鼠标指针：

{
    cursor: none;
}

如此一来，页面上的鼠标指针就消失了：

通过全局事件监听，模拟鼠标指针

既然，消失了，我们就简单模拟一个鼠标指针。

我们首先实现一个 10px x 10px 的圆形 div，设置为基于 <body> 绝对定位：

<div id="g-pointer"></div>

#g-pointer {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
}

那么，在页面上，我们就得到了一个圆形黑点：

接着，通过事件监听，监听 body 上的 mousemove，将小圆形的位置与实时鼠标指针位置重合：

const element = document.getElementById("g-pointer");
const body = document.querySelector("body");

function setPosition(x, y) {
  element.style.transform  = `translate(${x}px, ${y}px)`;                
}

body.addEventListener('mousemove', (e) => {
  window.requestAnimationFrame(function(){
    setPosition(e.clientX - 5, e.clientY - 5);
  });
});

这样，如果不设置 cursor: none，将会是这样一个效果：

再给 body 加上 cursor: none，就相当于模拟了一个鼠标指针：

在这个基础上，由于现在的鼠标指针，实际上是个 div，因此我们可以给它加上任意的交互效果。

以文章一开头的例子为例，我们只需要借助混合模式 mix-blend-mode: exclusion，就能够实现让模拟的鼠标指针能够智能地在不同背景色下改变自己的颜色。

对于混合模式这个技巧还有所疑问的，可以看看我的这篇文章：利用混合模式，让文字智能适配背景颜色

完整的代码：

<p>Lorem ipsum dolor sit amet</p>
<div id="g-pointer-1"></div>
<div id="g-pointer-2"></div>

body {
    cursor: none;
    background-color: #fff;
}
#g-pointer-1,
#g-pointer-2
{
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: #999;
    border-radius: 50%;
    background-color: #fff;
    mix-blend-mode: exclusion;
    z-index: 1;
}
#g-pointer-2 {
    width: 42px;
    height: 42px;
    background: #222;
    transition: .2s ease-out;
}

const body = document.querySelector("body");
const element = document.getElementById("g-pointer-1");
const element2 = document.getElementById("g-pointer-2");
const halfAlementWidth = element.offsetWidth / 2;
const halfAlementWidth2 = element2.offsetWidth / 2;

function setPosition(x, y) { 
    element.style.transform  = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;       element2.style.transform  = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`;
}

body.addEventListener('mousemove', (e) => {
  window.requestAnimationFrame(function(){
    setPosition(e.clientX, e.clientY);
  });
});

我们就能完美还原出题图的效果：

完整的代码，你可以戳这里：Mouse Cursor Transition

伪类事件触发

有一点需要注意的是，利用模拟的鼠标指针去 Hover 元素，Click 元素的时候，会发现这些事件都无法触发。

这是由于，此时被隐藏的指针下面，其实悬浮的我们模拟鼠标指针，因此，所有的 Hover、Click 事件都触发在了这个元素之上。

当然，这个也非常好解决，我们只需要给模拟指针的元素，添加上 pointer-events: none，阻止默认的鼠标事件，让事件透传即可：

{
    pointer-events: none;
}

鼠标跟随，不仅于此

当然，这里核心就是一个鼠标跟随动画，配合上 cursor: none。

而且，鼠标跟随，我们不一定一定要使用 JavaScript。

我在 不可思议的纯 CSS 实现鼠标跟随 一文中，介绍了一种纯 CSS 实现的鼠标跟随效果，感兴趣的也可以看看。

基于纯 CSS 的鼠标跟随，配合 cursor: none，也可以制作出一些有意思的动画效果。像是这样：

CodePen Demo -- Cancle transition & cursor none

文章来自https://www.cnblogs.com/coco1s/p/16396016.html

相关推荐

Python中的列表详解及示例_python列表讲解

艾瑞巴蒂干货来了，数据列表，骚话没有直接来吧列表(List)是Python中最基本、最常用的数据结构之一，它是一个有序的可变集合，可以包含任意类型的元素。列表的基本特性有序集合：元素按插入顺序存储可变...

PowerShell一次性替换多个文件的名称

告别繁琐的文件重命名，使用PowerShell语言批量修改文件夹中的文件名，让您轻松完成重命名任务在日常工作中，我们经常需要对大量文件进行重命名，以便更好地管理和组织。之前，我们曾介绍过使用Pytho...

小白必看!Python 六大数据类型增删改查秘籍，附超详细代码解析

在Python中，数据类型可分为可变类型（如列表、字典、集合）和不可变类型（如字符串、元组、数值）。下面针对不同数据类型详细讲解其增删改查操作，并给出代码示例、输出结果及分析总结。1.列表（Li...

python数据容器之列表、元组、字符串

数据容器分为5类，分别是：列表（list）、元组（tuple）、字符串（str）、集合（set）、字典（dict）list#字面量[元素1，元素2，元素3，……]#定义变量变量名称=[元素1，元素...

python列表(List)必会的13个核心技巧(附实用方法)

列表（List）是Python入门的关键步骤，因为它是编程中最常用的数据结构之一。以下是高效掌握列表的核心技巧和实用方法：一、理解列表的本质可变有序集合：可随时修改内容，保持元素顺序混合类型：一个列表...

如何利用python批量修改文件名_python如何对文件进行批量命名

很多语言都可以做到批量修改文件名，今天我就给大家接受一下Python的方法，首选上需求。图片中有10个txt文件，现在我需要在这些文件名的前面全部加一个“学生”，可以吗？见证奇迹的时刻到了。我是怎么做...

Python中使用re模块实现正则表达式的替换字符串操作

#编程语言#我是"学海无涯自学不惜！"，关注我，一同学习简单易懂的Python编程。0基础学python（83）Python中，导入re模块后还可以进行字符串的替换操作，就是sub()...

python列表十大常见问题，你遇到第几个?

Python列表常见问题及解决方案1.修改列表时的常见陷阱问题：在遍历时修改列表#错误做法：在遍历时删除元素会导致意外结果numbers=[1,2,3,4,5,6]forn...

python入门007:编辑列表_python列表怎么写入文件

一、列表的编辑操作列表创建后，随着程序的运行，可以通过对列表元素的增删改操作来编辑列表。1、修改列表元素的值修改列表元素的操作方法与访问列表元素的方法类似。例如，要修改列表元素的值，先指定列表及元素...

Python教程:在python中修改元组详解

欢迎你来到站长在线的站长学堂学习Python知识，本文学习的是《在Python中修改元组详解》。本知识点主要内容有：在Python中直接使用赋值运算符“=”给元组重新赋值、在Python中使用加赋值运...

Python列表(List)一文全掌握:核心知识点+20实战练习题

Python列表（List）知识点教程一、列表的定义与特性定义：列表是可变的有序集合，用方括号[]定义，元素用逗号分隔。list1=[1,"apple",3.14]lis...

Python教程-列表复制_python对列表进行复制

作为软件开发者，我们总是努力编写干净、简洁、高效的代码。Python列表是一种多功能的数据结构，它允许你存储一个项目的集合。在Python中，列表是可变的，这意味着你可以在创建一个列表后改变它的...

Python入门学习教程:第 6 章 列表

6.1什么是列表？在Python中，列表（List）是一种用于存储多个元素的有序集合，它是最常用的数据结构之一。列表中的元素可以是不同的数据类型，如整数、字符串、浮点数，甚至可以是另一个列表。列...

Python列表、元组、字典和集合_python中的列表元组和字典

Python中的列表（List）、元组（Tuple）、字典（Dict）和集合（Set）是四种最常用的核心数据结构。掌握它们的基础操作只是第一步，真正发挥威力的是那些高级用法和技巧。首先我们先看一下这...

学习编程第167天 python编程 使用format方法灵活替换字符串

今天学习的是刘金玉老师零基础Python教程第51期，主要内容是python编程使用format方法灵活替换字符串。一、format方法（一）format方法是字符串自带的方法,使用的format方法...

一周热门
最近发表
标签列表