jquery文字向上滚动
文章描述：
jQuery文字向上滚动效果，可以设置滚动的时间速度，像公告展示型的效果
html
<div class="container">
<div class="newgg"> <i class="notice-icon"></i>最新公告：
<div class="notice">
<ul>
<li>【重要通知】春节放假时间</li>
<li>【重要通知】元旦放假时间</li>
<li>【重要通知】国庆放假时间</li>
<li>【重要通知】中秋放假时间</li>
</ul>
</div>
</div>
</div>style
* {
margin: 0;
padding: 0;
}
.notice {
width: 70%;
height: 35px;
padding: 0 30px;
background-color: #f5f5f6;
overflow: hidden;
}
.notice ul li {
list-style: none;
line-height: 35px;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #666;
}
.newgg {
display: flex;
justify-content: start;
background-color: #f5f5f6;
align-items: center;
color: #666;
padding: 8px 0 8px 0;
}
.newgg .notice-icon {
width: 17px;
height: 18px;
background: url(images/icon2.png) no-repeat;
background-size: 100%;
display: block;
margin-left: 20px;
margin-right: 10px;
}script
$(function () {
// 调用 公告滚动函数
setInterval("noticeUp('.notice ul','-35px',500)", 2000);
})
/*
* 参数说明
* obj : 动画的节点，本例中是ul
* top : 动画的高度，本例中是-35px;注意向上滚动是负数
* time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
* function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
*
*/
function noticeUp(obj,top,time) {
$(obj).animate({
marginTop: top
}, time, function () {
$(this).css({marginTop:"0"}).find(":first").appendTo(this);
})
}
发布时间：2022/11/09
发表评论