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

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

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

主要代码如下图

dom结构 

js代码片断

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

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

相关文章

PDF文件中字体乱码的一种简单的处理方法

要解决问题先得碰到问题,碰到问题就迈出了解决问题的关键一步。 问题PDF文件的下载链接 这文件用Acrobat打开,无法搜索文本,复制文本出来也都是乱码。但用sumatra PDF打开就不存在这个问题! 用Acrobat的印前检查解决。prefligh…

解决kubelet报failed to get imageFs info: non-existent label \“docker-images\“

问题: 一环境主机重启后,查看kubelet日志经常有大量无法回收镜像文件报错,会导致kubelet的pleg不健康,从而导致kubelet发生重启。报错如下: 解决办法 解决方法一: systemctl stop docker systemctl stop …

解锁Python神器vars:让你的代码瞬间脱颖而出!

vars()函数是一个内置函数,用于返回对象的__字典__,其中包含对象的__属性__。它适用于模块、类和实例对象,为你提供了访问对象属性的便捷方式。 1. vars() 函数概述 vars()函数有两种使用方式: 不带参数:返回当前作…

SAP不同语言开发

文章目录 1 Please write English Nmae2 go to goto menu and translation3 Write your target language .4 Please input Chinese5 Summary 1 Please write English Nmae 2 go to goto menu and translation 3 Write your target language . 4 Please input Chinese 5 Summary…

从理论到实践:数字孪生技术的全面应用探讨

数字孪生是一种将实际物体或系统的数字模型与其实时运行状态相结合的概念。这一概念的核心在于创建一个虚拟的、与真实世界相对应的数字副本,以便监测、分析和优化实体系统的性能。 简单理解,数字孪生就是在一个设备或系统的基础上,创造一个…

pycharm 非局域网下 远程连接服务器docker中的conda环境

前提条件:有外网ip。 可以买个阿里云域名(一般实验室配置) 用蒲公英(参考我的这篇文章,一般是个人使用,免费三个用户) https://blog.csdn.net/weixin_75205835/article/details/135159099?spm1…

PLM系统哪个好?哪个PLM系统好?

PLM系统哪个好?哪个PLM系统好? 选择适合的PLM系统需要综合考虑企业的具体需求、系统功能、易用性、技术支持和成本等多个因素。目前市场上有很多知名的PLM系统,各有其特点和优势。以下是一些被广泛认可的PLM系统: 彩虹PLM系统&…

统计学-R语言-4.7

文章目录 前言描述水平的统计量平均数分位数中位数四分位数 众数描述差异的统计量(数据离散程度)极差四分位差方差和标准差变异系数标准分数 描述分布形状的统计量偏度与偏度系数峰度与峰度系数 数据的综合描述综合描述的R函数综合描述的实例 总结 前言 …

Python沙箱逃逸终极指南:安全漏洞分析和解决方案一网打尽

概要 Python 是一种强大而灵活的编程语言,但在某些情况下,可能需要运行不受信任的代码,同时又希望限制它的行为,以防止对系统的不良影响。这时,Python 沙箱就成为一种有用的工具,它可以帮助你在安全的环境…

js 回文串

思路: 判断一个字符串是否为回文字符串的基本思路是比较字符串的正序和倒序是否相同。 两者相同,则该字符串是回文字符串,否则不是。 要实现这一思路,我们可以使用 JavaScript 字符串的一些方法。我是忽略了所有的空格和符号&…

前端学习路径

菜鸟感觉很多人不太知道菜鸟写的博客是一个可以跟着学习、一起深入理解的过程,其中包括了菜鸟从刚开始学习到后面重新学习,再到后面进入学框架等一系列学习过程、知识和感悟,所以菜鸟把自己的博客整理成一个目录提取出来,好让读者…

微信小程序canvas画布图片保存到相册官方授权、自定义授权、保存

关键步骤介绍 wx.getSetting可以获取授权信息。 wx.authorize首次授权时会打开弹框让用户授权,若用户已选择同意或拒绝,后续不会再显示授权弹框。 如果授权信息显示未进行相册授权,则打开自定义弹框(show_auth: true&#xff0…

多级缓存架构(二)Caffeine进程缓存

文章目录 一、引入依赖二、实现进程缓存1. 配置Config类2. 修改controller 三、运行四、测试 通过本文章&#xff0c;可以完成多级缓存架构中的进程缓存。 一、引入依赖 在item-service中引入caffeine依赖 <dependency><groupId>com.github.ben-manes.caffeine…

设计师们必备的神秘利器!这款设计工具不容忽视!

「即时设计」与Figma类似&#xff0c;它是一种云设计工具&#xff0c;可以与多人实时合作&#xff0c;从设计到评估、交付、团队合作和版本管理。 作为一种国内工具&#xff0c;起初我们对它不是很乐观&#xff0c;但不得不说&#xff0c;经过深入使用&#xff0c;无论是迭代速…

智能反射面—流形优化

使用Manopt工具箱适合优化最小化问题&#xff0c;如果你的优化问题是最大化问题&#xff0c;那么需要将其转换为最小化问题然后使用Manopt工具箱求解。 具体安装过程 Matlab添加Manopt - 知乎 (zhihu.com) 优化问题 clc,clear; close all; srng(1);%rand seed N10; GR_num1e3…

【RT-DETR改进涨点】MPDIoU、InnerMPDIoU损失函数中的No.1(包含二次创新)

前言 大家好&#xff0c;我是Snu77&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持Re…

Resize:最近邻插值、双线性插值、双三次插值

Resize&#xff1a;最近邻插值、双线性插值、双三次插值 Opencv resize函数1. 最近邻插值&#xff08;INTER_NEAREST&#xff09;1.1 原理1.2 代码实例1.3 简单的代码复现1.4 特点 2. 双线性插值&#xff08;INTER_LINEAR&#xff09;&#xff08;默认值&#xff09;2.1 原理2.…

spring boot学习第八篇:通过spring boot、jedis实现秒单

参考&#xff1a;Redis实现分布式锁的7种方案 - 知乎 1、 准备数据库表&#xff0c;如下SQL表示库存表&#xff0c;有主键ID和库存数量字段 CREATE TABLE t_stock (id bigint(20) NOT NULL AUTO_INCREMENT,quantity bigint(20) NOT NULL,PRIMARY KEY (id) ) ENGINEInnoDB DEF…

2023年全球软件开发大会(QCon北京站2023)9月:核心内容与学习收获(附大会核心PPT下载)

随着科技的飞速发展&#xff0c;全球软件开发大会&#xff08;QCon&#xff09;作为行业领先的技术盛会&#xff0c;为世界各地的专业人士提供了交流与学习的平台。本次大会汇集了全球的软件开发者、架构师、项目经理等&#xff0c;共同探讨软件开发的最新趋势、技术与实践。本…

提供多语种客户服务的正确方法:让你更接近全球客户

优质的客户支持是任何成功企业的核心。每位客户都希望得到全天候的及时响应。事实上&#xff0c;根据《哈佛商业评论》的研究报告&#xff0c;快速响应会促使人们在未来支付更多的费用。此外&#xff0c;在与全球客户打交道时&#xff0c;您的沟通必须超越语言障碍。用客户的语…