wordpress收费下载资源主题
wordpress付费下载资源插件

javascript 滚动新闻js代码

以下是一个简单的用JavaScript实现滚动新闻的例子:

HTML代码:

<div id="news-container">
<ul id="news-list">
<li>这是第一条新闻</li>
<li>这是第二条新闻</li>
<li>这是第三条新闻</li>
<li>这是第四条新闻</li>
<li>这是第五条新闻</li>
</ul>
</div>

CSS代码:

#news-container {
height: 100px;
overflow: hidden;
}

#news-list {
margin: 0;
padding: 0;
list-style: none;
position: relative;
animation: scroll 10s linear infinite;
}

#news-list li {
display: block;
padding: 10px;
}

@keyframes scroll {
0% {
top: 0;
}
100% {
top: -500px;
}
}

JavaScript代码:

const newsList = document.getElementById("news-list");
const newsItems = newsList.getElementsByTagName("li");

for (let i = 0; i < newsItems.length; i++) {
const newsItem = newsItems[i];
newsItem.style.top = i * 100 + "px";
}

该代码将新闻列表的每个列表项(li元素)设置为相对定位,并使用CSS动画使其向上滚动。JavaScript代码将每个列表项的初始位置设置为其索引乘以100像素,以便它们在滚动时按顺序出现。您可以根据需要更改CSS动画和JavaScript代码以适应您的特定用例。

0 个评论

定制开发
本站承接WordPress等系统建站仿站、二次开发、主题插件定制等开发服务
在线咨询
  • 请直接说明需求,勿问在否
    QQ:1-247-246-247

  • QQ一群:104228692(满)
  • QQ二群:64786792
在线咨询
本站承接WordPress建站仿站、二次开发、主题插件定制等PHP开发服务!

了解详情