用jquery写个滚动公告 
时间: 2023-04-05 19:01:49 浏览: 27
我可以回答这个问题。您可以使用以下代码来实现一个滚动公告:
HTML:
```
<div class="scrolling-wrapper">
<ul>
<li>公告1</li>
<li>公告2</li>
<li>公告3</li>
<li>公告4</li>
<li>公告5</li>
</ul>
</div>
```
CSS:
```
.scrolling-wrapper {
overflow: hidden;
height: 50px;
}
.scrolling-wrapper ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
animation: scroll 10s linear infinite;
}
.scrolling-wrapper li {
margin-right: 20px;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
```
jQuery:
```
$(document).ready(function() {
var scrolling = setInterval(function() {
var firstItem = $('.scrolling-wrapper ul li:first-child');
$('.scrolling-wrapper ul').append(firstItem);
}, 5000);
});
```
这将在每5秒钟滚动一次公告,并且将第一个公告移动到列表的末尾。您可以根据需要更改滚动速度和公告列表的高度。
相关推荐










好的,下面是一个简单的二级导航的 jQuery 实现:
HTML 代码:
html
菜单1
子菜单1
子菜单2
子菜单3
菜单2
子菜单1
子菜单2
菜单3
jQuery 代码:
javascript
$(document).ready(function() {
// 隐藏所有子菜单
$('.nav ul').hide();
// 鼠标悬停在菜单上时显示子菜单
$('.nav li').hover(function() {
$('ul', this).stop().slideToggle(200);
});
});
CSS 代码:
css
.nav li {
position: relative;
}
.nav ul {
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
.nav ul ul {
top: 0;
left: 100%;
}
以上代码实现了一个简单的二级导航,当鼠标悬停在主菜单上时,显示其下的子菜单。注意要在 CSS 中设置子菜单的位置和 z-index,以免被主菜单遮挡。




