一个简单、高性能和跨浏览器的jQuery旋转/转盘插件，用于由Animate.css提供支持的文本短语。

Posted

tags:

中文标题：一个简单、高性能和跨浏览器的jQuery旋转/转盘插件，用于由Animate.css提供支持的文本短语。 原文标题：A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css. 项目评级：Star:395      Fork:68 下载地址：https://github.com/MrSaints/Morphext 详情介绍

变形文字

一个简单、高性能和跨浏览器的jQuery旋转/转盘插件，用于由Animate.css提供支持的文本短语。Softpedia将其更简洁地描述为：

一个jQuery插件，用于创建基于文本的旋转木马，一个接一个地旋转小的或大的文本片段，就像滑块处理图像一样。。。这是一个很好的工具，可以用来显示流行语、任务说明、标记行等等。

如果您想通过更大的灵活性（例如动画）和HTML对象而不是文本短语（例如无序列表项）来实现类似的效果，请查看Morphist。

网站/演示

安装

从项目页面下载。

与Bower一起安装：bower install --save Morphext

用法

此存储库中包含一个名为index.html的演示。打开它查看最终结果。

选项

Morphext公开了以下选项来改变插件的行为：

<表格>

选项

类型

默认

描述

动画

string

bounceIn

[in]动画类型。有关可用动画的列表，请参阅Animate.css

分离器

string

,

将基于此分隔符创建一个要旋转的短语数组。如果你想用不同的方式来区分短语，请更改它（例如，So Simple/Very Doge/Much Wow/So Cool）

速度

int

2000

每个短语更改之间的延迟（以毫秒为单位）

完成

object Function

null

在中为项目设置动画后执行的回调

它们可以这样使用：

该插件在很大程度上依赖于Animate.css，因为它提供了流畅、高性能的动画来在每个短语之间转换。因此，默认动画速度（不同于如上所述的每个短语之间的间隔）可以通过CSS来改变：

“问题”

<表格>

问题

描述

解决方案

视口

Animate.css的某些动画（例如“向上”和“向下”）涉及到将元素平移到视口之外，从而导致意外的垂直和/或水平空白（动画效果后面的滚动条更明显。这不是一个错误

可以通过将overflow: hidden;（CSS）应用于正在设置动画的元素的父元素来消除它

JavaScript语言

使用Animate.css[css animation]类添加/删除元素需要使用JavaScript，从而创建“过渡效果”。如果JavaScript被禁用或不可用，则不会发生任何事情。所有短语及其分隔符将按原样显示（优雅的降级）

不适用

CSS3公司

Animate.css依赖于CSS3动画和转换（在大多数现代浏览器中可用）。如果CSS3被禁用或不可用，短语将继续从一个短语转换到另一个短语（假设启用了JavaScript），但不会有动画效果

此插件没有提供回退。然而，您可以通过使用Modernizr（用于特征检测）和polyfill来处理回退

如果您在使用此插件时遇到任何问题或需要帮助，只需在此存储库中打开GitHub问题，或者您可以通过Twitter与我联系。

先决条件

其他

Morphext的本地端口已在其他JavaScript框架中开发（例如React和Polymer）：

它们不是官方插件开发的一部分，开发这些端口时使用的方法可能不是惯用的。请自行承担使用风险。

欢迎问题和拉取请求。

许可证

Morphext是根据麻省理工学院的许可证获得许可的(http://ian.mit-license.org/).

jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

一个简单的转盘效果

在 HTML5 和跨浏览器中工作的二维码阅读器插件

大转盘抽奖css3+js(简单书写)

ios16桌面图标转盘效果

动画后的iOS旋转手势