jquery动态插件之gsap和TextPlugin

在这里插入图片描述

<!DOCTYPE html>
<html>
<head><title>数字化人才认证数动画</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/TextPlugin.min.js"></script> <style>.counter {font-size: 24px;font-weight: bold;}</style>
</head>
<body><span class="counter" data-target="12345">0</span> <script>$(document).ready(function() {gsap.registerPlugin(TextPlugin); // 注册 TextPlugin 插件$('.counter').each(function() {const target = parseInt($(this).data('target'));gsap.to($(this), {duration: 1, ease: "power2.out", text: target, onUpdate: function() {$(this.target).text(Math.round($(this.target)._gsap.get(0)));}});});});</script>
</body>
</html>

多个数字使用一个方法会从上到下加载。

报错:
Uncaught TypeError:
Cannot read properties of undefined (reading ‘get’) at Tween.onUpdate [as _onUpdate] 。

onUpdate: function() {// 这里的	this.target 是undefined$(this.target).text(Math.round(this.target._gsap.get(0)));
}

解决方法:

onUpdate: function() {$(this.target).text(Math.round($(this.target)._gsap.get(0)));
}

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

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

相关文章

【强化学习】第02期:动态规划方法

笔者近期上了国科大周晓飞老师《强化学习及其应用》课程&#xff0c;计划整理一个强化学习系列笔记。笔记中所引用的内容部分出自周老师的课程PPT。笔记中如有不到之处&#xff0c;敬请批评指正。 文章目录 2.1 动态规划&#xff1a;策略收敛法/策略迭代法2.2 动态规划&#xf…

GD32F4时钟配置

1.前言 硬件&#xff1a;GD32F450 最高时钟频率200MHZ(外部晶振8MHZ) 软件&#xff1a;KEIL(V5.35) 固件包&#xff1a;GD32F4xx_Firmware_Library_V3.2.0 2.时钟树 时钟配置大概流程如下图红线指示&#xff0c;GD32F470的最高频率可以到240MHZ&#xff0c;GD32F450最高…

【frp】cron定时检查zfrpc.service是否启动成功

zfrpc 经常自动启动失败cron定时检查zfrpc.service是否启动成功 ChatGPT 要使用 cron 定期检查 zfrpc.service 是否启动成功,并在服务未运行时尝试启动它,你可以按照以下步骤进行操作: 创建脚本 首先,你需要创建一个脚本,这个脚本将检查 zfrpc.service 的状态,并在服务未…

字符串反转字符串单词(1)

大家好&#xff0c;今天我们来探讨一道经典的编程问题——翻转字符串里的单词。这个问题要求我们编写一个函数&#xff0c;将输入字符串中的所有单词进行翻转&#xff0c;但单词内部的字符顺序保持不变。 问题分析&#xff1a; 1. 首先&#xff0c;我们需要理解翻转字符串里的…

Codeforces Round 143 (Div. 2) C. To Add or Not to Add 题解 前缀和 二分

To Add or Not to Add 题目描述 A piece of paper contains an array of n n n integers a 1 , a 2 , . . . , a n a_{1},a_{2},...,a_{n} a1​,a2​,...,an​. Your task is to find a number that occurs the maximum number of times in this array. However, before l…

点云压缩配置开发环境遇到一些bug

1、配置基于cuda的计算库&#xff0c;Chamfer3D和pointops 编译chamfer3D时候会遇到一个cub版本的校验错误。 解决方法&#xff1a;根据错误提示&#xff0c;进入cuda的config配置文件中&#xff0c;使用#define将校验功能关闭 编译pointops&#xff0c;会遇到报错&#xff1a;…

C++Primer Plus 第十四章代码重用:14.4.4 数组模板示例和非类型参数2

14.4.4 数组模板示例和非类型参数 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右…

《分析模式》漫谈08-单继承不是“唯一继承”

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 《分析模式》第2章这一段&#xff1a; 划线处的single inheritance&#xff0c;2004中译本的翻译&#xff1a; 翻译为“单继承”&#xff0c;是正确的。 2020中译本的翻译&#xff1a…

Java NIO(一) 概述

NIO主要用于以少量线程来管理多个网络连接&#xff0c;处理其上的读写等事件。在大量连接情况下&#xff0c;不管是效率还是空间占用都要优于传统的BIO。 Java NIO 由以下几个核心部分组成&#xff1a; Channel Buffer Selector Selector 如果你的应用打开了多个连接&#x…

分页插件 count有数据,代码不往下执行

如下:如果打印了sql那么当row>0时会有图2下面sql详情的输出 问题出在了分页参数上,pageNum为1,并且pageSize>2才能打印出图二的结果,图一为pageNum值是0,注意,查询第一页,分页应该传入的是1而不是0

大数据批处理系统和业务系统是两种不同类型的系统,它们在目的、设计、功能和使用场景上有所区别

大数据批处理系统和业务系统是两种不同类型的系统&#xff0c;它们在目的、设计、功能和使用场景上有所区别。以下是大数据批处理系统和业务系统之间的一些主要差异&#xff1a; 1. **目的**&#xff1a; - **大数据批处理系统**&#xff1a;主要用于处理和分析大量数据&am…

MySQL高级1.0

目录 &#x1f4cc;MySQL存储过程和函数 ✏️存储过程和函数介绍 ✏️存储过程的创建和调用 ✏️存储过程的查看和删除 ✏️存储过程语法-变量 ✏️存储过程语法-if语句 ✏️存储过程语法-参数传递 ✏️存储过程语法-while循环 ✏️存储过程语法-存储函数 &#x1f4…

Linux高并发服务器开发(六)线程

文章目录 1. 前言2 线程相关操作3 线程的创建4 进程数据段共享和回收5 线程分离6 线程退出和取消7 线程属性&#xff08;了解&#xff09;8 资源竞争9 互斥锁9.1 同步与互斥9.2 互斥锁 10 死锁11 读写锁12 条件变量13 生产者消费者模型14 信号量15 哲学家就餐 1. 前言 进程是C…

【FFmpeg】avio_open2函数

【FFmpeg】avio_open2函数 1.avio_open21.1 创建URLContext&#xff08;ffurl_open_whitelist&#xff09;1.1.1 创建URLContext&#xff08;ffurl_alloc&#xff09;1.1.1.1 查找合适的protocol&#xff08;url_find_protocol&#xff09;1.1.1.2 为查找到的URLProtocol创建UR…

影响Cache命中率的因素有哪些?

缓存命中率&#xff08;Cache Hit Rate&#xff09;是指处理器访问缓存时&#xff0c;所需数据已经在缓存中找到的次数与总访问次数的比例。提高缓存命中率可以显著提升系统性能&#xff0c;因为缓存访问速度远快于主存访问速度。影响缓存命中率的关键因素包括&#xff1a; 1.…

C语言异常处理就机制setjmp()和longjmp()

C语言setjmp()和longjmp()实现异常处理机制。 setjmp() 用于保存当前的程序执行状态。 longjmp() 用于在后面的某个时刻返回到setjmp()点的状态。 类似goto。但goto是本地的&#xff0c;只能在函数内部跳转。 setjmp()和longjmp()是非局部跳转语句&#xff0c;可在调用栈上&a…

通信系统网络架构_3.移动通信网络架构

移动通信网为移动互联网提供了强有力的支持&#xff0c;尤其是5G网络为个人用户、垂直行业等提供了多样化的服务。以下从业务应用角度给出面向5G网络的组网方式。 1.5GS与DN互连 5GS&#xff08;5G System&#xff09;在为移动终端用户&#xff08;User Equipment&#xff0c;…

CSRF的其他防范措施?

一般情况下&#xff0c;我们可以通过各种防护策略来防御CSRF&#xff0c;对于QA、SRE、安全负责人等&#xff0c;我们可以做哪些事情来提升安全性呢&#xff1f; 一、CSRF测试 CSRFTester是一款CSRF漏洞的测试工具&#xff0c;CSRFTester工具的测试原理大概是这样的&#xff…

BLACKBOX.AI:解锁开发新纪元,加速编程学习的AI神器!

文章目录 &#x1f4af;BLACKBOX.AI 官网&#x1f341;1 BLACKBOX.AI 工具使用教程&#x1f341;2 BLACKBOX.AI工具使用界面介绍&#x1f341;3 Chat(聊天)功能&#x1f341;4 Explore (探索)功能&#x1f48e;4.1 Terminal(终端)功能&#x1f48e;4.2 Discover(发现)功能&…

STM32 IWDG(独立看门狗)

1 IWDG简介 STM32有两个看门狗&#xff1a;一个是独立看门狗&#xff08;IWDG&#xff09;&#xff0c;另外一个是窗口看门狗。独立看门狗也称宠物狗&#xff0c;窗口看门狗也称警犬。本文主要分析独立看门狗的功能和它的应用。 独立看门狗用通俗一点的话来解释就是一个12位的…