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最高…

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

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…

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

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

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位的…

关于转BigDecimal对象时,精度问题

//浮点型数值Double d 0.0003d;//转BigDecimal对象BigDecimal a new BigDecimal(d);System.out.println(String.format("浮点类型数字:%.4f创建BigDecimal对象并且保留多位小数并且保留多位小数时,精度会变多,结果为%s",d,a.setScale(8, BigDecimal.ROUND_DOWN)));…

format()方法——格式化字符串

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法介绍 format()可以对数据进行格式化处理操作&#xff0c;语法如下&#xff1a; format(value, format_spec) format_spec为格式化解释。当参数…

【计算机毕业设计】092基于微信小程序二手闲置交易市场

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

探索区块链:颠覆性技术的崛起

目录 一、引言 二、区块链技术概述 三、区块链应用场景 四、区块链面临的挑战 五、区块链的未来展望 六、结语 一、引言 在数字化浪潮的推动下&#xff0c;区块链技术以其独特的去中心化、透明性和不可篡改性等特性&#xff0c;正在逐步改变我们的生活。从金融领域到供应…

基于Java的茶文化交流系统【附源码+LW】

摘 要 计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已经有了很丰富的基础&#xff0c;并且在现实生活中也到处都在使用&#xff0c;可以说&#xff0c;经过几十年的发展&#xff0c;互联网技术已经把地域信息的隔阂给消除了&#xff0c;让整个世界都可以即时通话…

MySQL数据库存储引擎

MySQL数据库存储引擎 存储引擎概念 存储引擎也称为表类型 通过不同的技术比如说&#xff0c;存储机制&#xff0c;索引技巧&#xff0c;锁定水平等等&#xff0c;来提供不同的功能。 查看MySQL支持的存储引擎 show engines\G&#xff1b; 常用引擎比较 对事务有需求 innodb …

TiDB-从0到1-数据导出导入

TiDB从0到1系列 TiDB-从0到1-体系结构TiDB-从0到1-分布式存储TiDB-从0到1-分布式事务TiDB-从0到1-MVCCTiDB-从0到1-部署篇TiDB-从0到1-配置篇TiDB-从0到1-集群扩缩容 一、数据导出 TiDB中通过Dumpling来实现数据导出&#xff0c;与MySQL中的mysqldump类似&#xff0c;其属于…

JavaWeb——MySQL:navicate客户端工具简单使用

目录 1. 连接 2. 新建数据库 3. 使用数据库 4. 新建表 5.使用表 6. 导出数据库 我这里是英文版&#xff0c;没有进行汉化。 1. 连接 点击左上角Connection&#xff0c;选择MySQL&#xff0c;&#xff08;我连接的是自己计算机上的数据库&#xff09;连接名输入&#x…

抖音开放平台运营同学联系我了,非常感谢

大家好&#xff0c;我是小悟 是怎么个事呢&#xff1f; 前几天在对接抖音开放平台&#xff0c;服务商代开发小程序里面的小程序备案&#xff0c;上传备案图片接口遇到了问题&#xff0c;具体的问题可详阅【抖音开放平台&#xff0c;这谁写的&#xff0c;要扣绩效吧】。 评论…