javascript - 如何将滚动类添加到元素并在完成后将其删除
问题描述
我试图在文本完成滚动后每 1 分钟向文本添加一个滚动类,我将删除该类并等待接下来的 1 分钟。请任何人都可以帮我解决这个问题,下面是我的示例代码,但它没有按预期工作。
$(function(event){
$infoLongMessage = $("#infoLongMessage");
var wait = 60000;
var timer = ($infoLongMessage.text().length + wait);
setInterval(function(){
$infoLongMessage.toggleClass("scroll-left");
}, timer);
})
.content{
background-color: #000;
color: #fff;
padding: 6px 10px;
overflow: hidden;
}
#infoLongMessage{
overflow: hidden;
white-space: pre;
display:block;
}
.scroll-left{
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scrollleft 15s linear infinite;
-webkit-animation: scrollleft 15s linear infinite;
animation: scrollleft 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scrollleft {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scrollleft {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scrollleft {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<span id="infoLongMessage" class="scroll-left">Browser sources let you display a webpage from the internet or a local file and are commonly used for widgets and alerts</span>
</div>
解决方案
你不需要任何 js 来实现你的想法。你需要一个股票行情。如果需要,您也可以延迟动画。
@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
background-color: #9a1f1f;
color: #fff;
padding: 6px 10px;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 2rem;
line-height: 2rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 1rem;
font-size: 1rem;
color: white;
}
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">Hi Lea!</div>
<div class="ticker__item">Look at them !!!</div>
<div class="ticker__item">Owww new items...</div>
<div class="ticker__item">
offers | save up to 50% — shop now
</div>
</div>
</div>
推荐阅读
- python - Django 子查询,注释。有什么方法可以连接三个表进行查询以查找 django 中某个字段的总和(查询集 api)?
- android - 使用 Agora 自动创建频道,无需管理服务器和令牌
- python - 具有 2 个不同类别的 OOP 的 Tkinter,带有“循环导入”错误
- javascript - 即使在数百甚至数千个错误之后,网站如何继续运行?
- reactjs - 反应 | 同步自定义(范围)滚动反应无限滚动
- mule - apiKit 路由器 Mule4 后多部分/表单数据损坏
- angular - 关于 RXJS 运算符“withLatestFrom”的解释
- sse - 从 __m128 内在函数中获取 uint64_t?
- php - 试图获取非对象 yii 的属性
- php - 在 Laravel 的 Vue 组件中使用 axios 请求 GET 返回文档标记