纯js文字洗牌式切换特效插件

news/2024/12/23 13:38:07/文章来源:https://www.cnblogs.com/lawutuobang/p/18623772

ShuffleText是一款纯js文字洗牌式切换特效插件。该插件在鼠标滑过指定的文本时,文字会不停的逐个进行翻转,类似洗牌效果,非常炫酷。

在线演示  下载

 使用方法

在页面中引入shuffle-text.js文件。

< script src="path/to/shuffle-text.js">
 HTML结构

ShuffleText插件基本的HTML结构如下:

< html >
< head >< script src="shuffle-text.js">< body >< h1 id="myText">This is a ShuffleText.js Examle< script >var el = document.getElementById("myText");var text = new ShuffleText(el);text.start();
 初始化插件

通过下面的方法为要进行洗牌切换的文字创建实例对象。

var el = document.getElementById( "myText" );var text =  new ShuffleText(el);             

 方法

ShuffleText洗牌式文字切换插件可用的方法有:

//开始执行洗牌动画
start(): void
//结束洗牌动画
stop(): void
//设置文字
setText(text: string): void
dispose(): void

 

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

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

相关文章

ABB机器人IO板短路怎么解决

解决ABB机器人IO板短路问题的步骤 - 关闭控制系统电源:首先,关闭ABB机器人的控制系统电源,以确保安全操作。 - 检查线路连接:检查IO板的线路连接是否牢固,有无松动或损坏的迹象。 - 使用万用表测量:使用万用表测量电路的三相是否有短路或接地现象。在测量时,…

聊一聊 C#线程池 的线程动态注入 (上)

一:背景 1. 讲故事 在线程饥饿的场景中,我们首先要了解的就是线程是如何动态注入的?其实现如今的ThreadPool内部的实现逻辑非常复杂,而且随着版本的迭代内部逻辑也在不断的变化,有时候也没必要详细的去了解,只需在稍微宏观的角度去理解一下即可,我准备用三篇来详细的聊一…

IT项目经理力推的2024年10款项目管理工具

在数字化时代,IT项目经理面临着日益复杂的挑战,尤其是在项目管理工具的选择上。为了帮助项目经理在2024年更高效地管理项目,本文将介绍10款备受推崇的管理工具,这些工具不仅功能强大,而且能够适应各种项目管理需求。无论你是初学者还是经验丰富的项目经理,这些工具都能为…

最近公共祖先(LCA)笔记

最近公共祖先(LCA)笔记 【模板】最近公共祖先(LCA) 题目入口 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先。 输入格式 第一行包含三个正整数 \(N,M,S\),分别表示树的结点个数、询问的个数和树根结点的序号。 接下来 \(N-1\) 行每行包含两个正…

Windows 网络安全系统框架环境搭建

网络安全虚拟机框架环境搭建操作系统Vmware Workstation (17.5.2 build-23775571) Windows 11 300G硬盘空间(C、D、E) 8G内存 分三个盘,其中D盘用于安装软件、E盘用于工作Win11 跳过联网激活 shift+F10 或Fn+shift+F10 打开cmd窗口,执行oobe\bypassNRO,系统自动重启后即…

【日记】昨天才找到的头绳,今天就不小心给洗了(947 字)

正文前些周有个周末研究了一天的护发素(虽然现在已经忘光了),今天研究了半天到一天的沐浴露(所以打算写点什么记下来,免得又忘了)。研究完了之后,发现母亲原来给我买的那瓶沐浴露,是把能踩得雷都踩了一遍……甲基氯异噻唑啉酮(CMIT)和甲基异噻唑啉酮(MIT)都有,不过…

【Java编程】定时任务实现原理详解

一、摘要 在很多业务的系统中,我们常常需要定时的执行一些任务,例如定时发短信、定时变更数据、定时发起促销活动等等。 在上篇文章中,我们简单的介绍了定时任务的使用方式,不同的架构对应的解决方案也有所不同,总结起来主要分单机和分布式两大类,本文会重点分析下单机的…

manim边学边做--移动动画

在Manim中,其实直线移动的动画非常简单,每个Mobject对象都有animate属性, 通过obj.animate.shift()或者obj.animate.move_to()很容易将对象从一个位置移往另一个位置。 不过,如果要更复杂的移动路线,那么animate属性的移动方法就无法满足了。 本篇介绍Manim中的两个处理复…

科来网络分析系统:国产网络数据包分析工具推荐

wireshark作为数据分析过程中必备的工具,深受好评。但是其使用起来有一定的门槛,本文介绍的:科来网络分析系统(技术交流版)。在某些方面相比于wireshark更有优势。附数据包分析案例 1、下载安装: 登录官网 https://www.colasoft.com.cn/downloads/capsa2、启动3、选择工作…

PDF转换工具Marker、MinerU、Markitdown对比分析

1 文件格式插件MarkerMinerUMarkitdownmagic-pdfmagic-doc支持的文件格式PDF、EPUB 和 MOBIPDFPPT、PPTX、DOC、DOCX、PDFPDF, PowerPoint, Word, Excel Images (EXIF metadata and OCR), Audio (EXIF metadata and speech transcription), HTML, CSV, JSON, XML, ZIP f…

【附源码】JAVA在线拍卖系统+SpringBoot+VUE+前后端分离

学弟,学妹好,我是爱学习的学姐,今天带来一款优秀的项目:在线拍卖系统 。 本文介绍了系统功能与部署安装步骤,如果您有任何问题,也请联系学姐,偶现在是经验丰富的程序员! 一. 系统演示 管理后台-截图拍卖前端-截图视频演示 https://githubs.xyz/show/307.mp4 二. 系统概…