抖音弹幕玩法汉字找不同让鼠标指针自动漂浮的实现原理及代码

news2024/12/26 11:33:27

如下图,抖音直播间弹幕互动玩法,为了增强用户的视觉感知体验,在里面加了一个鼠标,来让用户感知到自己在操作。下一节我们将背景音乐也给加上去。

我们实现的方案是用anime.js动画,来让一个图片在指定区域范围内随机漂浮动。实现的结果如下图:

主要代码如下图

dom结构 

js代码片断

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1388961.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WebGL开发智慧城市应用

在使用WebGL实现智慧城市应用时,需要考虑一系列的问题,以确保系统的性能、安全性和用户体验。以下是在开发WebGL智慧城市应用时需要注意的问题,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司,…

从源码中分析SDS相较于C字符串的优势

文章目录 前言Type && EncodingsdsencodingcreateStringObjectcreateEmbeddedStringObject总结 createRawStringObject总结 createStringObjectFromLongDouble总结 createStringObjectFromLongLongWithOptions总结 相关操作sdscatlen总结 阈值44sds VS C字符串 前言 从…

加密经济学:Web3时代的新经济模型

随着Web3技术的迅猛发展,我们正迈入一个全新的数字经济时代。加密经济学作为这一时代的核心,不仅在数字货币领域崭露头角,更是重新定义了传统经济模型,为我们开启了一个充满创新和机遇的新纪元。 1. 去中心化的经济体系 Web3时代…

12.1、2、3-同步状态机的结构以及Mealy和Moore状态机的区别

同步状态机的结构以及Mealy和Moore状态机的区别 1,介绍Mealy型状态机和Moore型状态机的两种结构2,设计高速电路的方法 由于寄存器传输级(RTL)描述的是以时序逻辑抽象所得到的有限状态机为依据,因此,把一个时…

【嘉立创EDA-PCB设计指南】1.PCB基本概念及原理图绘制

前言:本文详解PCB基本概念以及实现MCU最小系统原理图的绘制(原理图包括MCU芯片GD32F103C8T6、外部晶振、输出端口、USB输入口、5v转3v3稳压输出、复位按键、唤醒按键、LED)。为本专栏后面章节实现PCB绘制做准备。 最终绘制的原理图如下所示&…

LinkedList ArrayDeque源码阅读

文章目录 LinkedList简介LinkedList例子LinkedList继承结构LinkedList代码分析成员变量方法 ArrayDeque简介ArrayDeque继承结构ArrayDeque代码分析总结参考链接 本人的源码阅读主要聚焦于类的使用场景,一般只在java层面进行分析,没有深入到一些native方法…

Java零基础教学文档servlet(3)

【AJax】 1.传统开发模式的不足 传统开发模式基于浏览器数据传输功能,页面填写数据/展示数据。浏览器通过访问一个URL地址,将页面的数据提交给服务器。服务器将需要展示的数据返回给浏览器,浏览器再进行数据解析,将数据呈现在用户面前。这种…

QT quick基础:加载资源文件(字体)

一、加载字体 1、准备字体库 Roboto-Regular.ttf 2、在工程下面新建文件夹fonts,并将字体库放到该文件夹下面。 3、在QT Create 工程中添加字体。 添加现有文件选择Roboto-Regular.ttf。 4、执行qmake 5、在.qml文件加载字体 /* 加载字体 */FontLoader {id: f…

如何在 Windows 10 中恢复已删除的文件

几乎每个 Windows PC 用户都曾意外删除过他们想要保留的文件。尽管您的第一步应该是检查回收站,但它可能不在那里。Windows 10 不会自动将所有已删除的文件保留在回收站中。有时它会永久删除文件,让您再也看不到它们。如果您遇到这种情况,我们…

如何使用Docker一键部署WBO白板并实现固定公网地址远程访问

文章目录 前言1. 部署WBO白板2. 本地访问WBO白板3. Linux 安装cpolar4. 配置WBO公网访问地址5. 公网远程访问WBO白板6. 固定WBO白板公网地址 前言 WBO在线协作白板是一个自由和开源的在线协作白板,允许多个用户同时在一个虚拟的大型白板上画图。该白板对所有线上用…

AI数字人短视频变现项目:打造短视频运营变现新模式

随着社交媒体和短视频平台的兴起,越来越多的人开始关注如何将短视频变现。在这个时代,创新和科技成为了推动变现模式发展的关键。AI数字人作为一种全新的创新形式,正在迅速进入人们的视野。本文将介绍AI数字人短视频变现项目,以及…

新晋中科院TOP,不到3个月出结果,编辑处理效率真心高!

【SciencePub学术】 Measurement 期刊评说 网 友 辣 评 评说1:不到三个月出结果,挺快的,期刊效率高,2023年12月27日期刊更新成TOP了,值得推荐! 评说2:一般送审了就问题不大,超过…

公众号申请数量已超上限的解决方法

一般可以申请多少个公众号? 公众号申请限额在过去几年内的经历了很多变化。对公众号申请限额进行调整是出于多种原因,确保公众号内容的质量和合规性。企业公众号的申请数量从50个到5个最后到2个,对于新媒体公司来说,这导致做不了…

分类预测 | Matlab实现CS-SVM布谷鸟算法优化支持向量机的数据分类预测

分类预测 | Matlab实现CS-SVM布谷鸟算法优化支持向量机的数据分类预测 目录 分类预测 | Matlab实现CS-SVM布谷鸟算法优化支持向量机的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现CS-SVM布谷鸟算法优化支持向量机的数据分类预测。 2.自带数据…

用Perl采集美容化妆目标网站做一个深度调研

在Perl中编写爬虫程序涉及到几个关键步骤,包括使用相关的库来发送HTTP请求和解析HTML内容。首先我们要了解Perl爬虫程序编程得几大步骤:安装必要的Perl模块—创建一个用户代理—发送HTTP请求—解析响应内容—提取所需数据—存储或进一步处理数据。所以说…

设计模式之开闭原则:如何优雅地扩展软件系统

在现代软件开发中,设计模式是解决常见问题的最佳实践。其中,开闭原则作为面向对象设计的六大基本原则之一,为软件系统的可维护性和扩展性提供了强大的支持。本文将深入探讨开闭原则的核心理念,以及如何在实际项目中运用这一原则&a…

2024山东省“信息安全管理与评估“---内存取证(高职组)

2024山东省“信息安全管理与评估“—内存取证(高职组) PS:需要环境私信博主 内存取证: 任务环境说明: 攻击机:kali 物理机:Windows 任务说明:本次需要检测的镜像已放置放在本机桌面上。 这里想学取证的小伙伴可以参考:http://t.csdnimg.cn/EHwpu 1.从内存中获取到用户…

在公网服务器搭建CobaltStrike

FLAG:自律是对抗悲伤的唯一出路 专研方向: 服务器Centos,CS渗透神器 每日emo:04年的猴,过的怎么样了 欢迎各位与我这个菜鸟交流学习 在公网服务器搭建CobaltStrike: 之前玩cs都是在局域网,准备积累以下战…

spring常见漏洞(3)

CVE-2017-8046 Spring-Data-REST-RCE(CVE-2017-8046)&#xff0c;Spring Data REST对PATCH方法处理不当&#xff0c;导致攻击者能够利用JSON数据造成RCE。本质还是因为spring的SPEL解析导致的RCE 影响版本 Spring Data REST versions < 2.5.12, 2.6.7, 3.0 RC3 Spring Bo…

国自然热点|超级增强子“super”在哪?cell重磅发现:新型DNA调控元件——促进子

增强子&#xff08;enhancer&#xff09;&#xff0c;又可称为强化子&#xff0c;是DNA上一段可与蛋白质&#xff08;反式作用因子&#xff0c;trans-acting factor&#xff09;结合的区域&#xff0c;可以被转录因子等蛋白结合从而激活基因转录。1981年&#xff0c;增强子首次…