jquery - jQuery水平多文本自动滚动一次
问题描述
我正在尝试创建一个水平的“新闻滚动条”,一次从右向左滚动一个文本。
我的代码不像我想的那样工作,它li
一次显示了所有内容。有人可以在这里帮助我吗?也许必须用 jQuery 来完成?我尝试了我发现的不同方法,但没有一种方法能如我所愿。
谢谢
ul {
width: 100%;
height: 30px;
overflow: hidden;
position: relative;
background: black;
color: white;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
}
ul li {
position: absolute;
display: inline-block;
width: 90%;
height: 100%;
font-size: 20px;
line-height: 30px;
margin: 0 auto;
text-align: center;
white-space: nowrap;
overflow: hidden;
color: white;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: news_scroller 20s linear infinite;
-webkit-animation: news_scroller 20s linear infinite;
animation: news_scroller 20s linear infinite;
}
<ul class="news_scroller">
<li>some text here askdadjsdkjaskjdkajs</li>
<li>some more text here second news to show/scroll</li>
<li>another one here bla bla bla</li>
<li>sdfihjhgahr89we7 8rtgdsofui gysdhfhoj dsdf</li>
</ul>
解决方案
这是你需要的吗?
/* (A) STANDARD ROW HEIGHT */
.vwrap, .vitem {
height: 30px;
line-height: 30px;
}
/* (B) FIXED WRAPPER */
.vwrap {
overflow: hidden; /* HIDE SCROLL BAR */
background: #eee;
}
/* (C) TICKER ITEMS */
.vitem { text-align: center; }
/* (D) ANIMATION - MOVE ITEMS FROM TOP TO BOTTOM */
/* CHANGE KEYFRAMES IF YOU ADD/REMOVE ITEMS */
.vmove { position: relative; }
@keyframes tickerv {
0% { bottom: 0; } /* FIRST ITEM */
30% { bottom: 30px; } /* SECOND ITEM */
60% { bottom: 60px; } /* THIRD ITEM */
90% { bottom: 90px; } /* FORTH ITEM */
100% { bottom: 0; } /* BACK TO FIRST */
}
.vmove {
animation-name: tickerv;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.vmove:hover { animation-play-state: paused; }
<div class="vwrap"><div class="vmove">
<div class="vitem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="vitem">Aliquam consequat varius consequat.</div>
<div class="vitem">Fusce dapibus turpis vel nisi malesuada sollicitudin.</div>
<div class="vitem">Pellentesque auctor molestie orci ut blandit.</div>
</div></div>
推荐阅读
- c++ - 使用 Z3 证明分辨率定理
- security - Nifi 基本身份验证实现
- amazon-web-services - AWS RDS:致命:用户“postgres”的密码身份验证失败
- r - 根据R中的列和值替换矩阵中的项目
- elasticsearch - Fluentd 无法连接到 Elasticsearch - [警告]:#0 [elasticsearch] 无法连接 Elasticsearch 或获取版本。假设 Elasticsearch 5
- javascript - Express res.json 创建我没有创建的 ID 属性
- css - 如何在 react-bootstrap 中居中对齐 Container 组件的内容?
- javascript - 反应回调函数不起作用。发现了一个错误
- ios - 如何在 SwiftUI 中向 List 的 .ondelete() 添加确认
- python - 如何从 Pandas Dataframe 创建特定格式的文本文件