关于原生JS实现公告上下滚动效果

最新推荐文章于 2025-06-06 09:15:08 发布

原创最新推荐文章于 2025-06-06 09:15:08 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

1 篇文章

订阅专栏

html代码：

<div id="noticeList">
	<ul>
		<li>aaa</li>
		<li>bbb</li>
		<li>ccc</li>
	</ul>
</div>

JS代码：

/*
* 参数说明
* 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);
		 })
		}

css代码：

div,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
#noticeList{
	idth: 300px;/*单行显示，超出隐藏*/
	height: 140px;/*固定公告栏显示区域的高度*/
	padding: 0 30px;
	background-color: #b3effe;
	overflow: hidden;
}

#noticeList ul li {
	 list-style: none;
	 line-height: 35px;
	/*以下为了单行显示，超出隐藏*/
	 display: block;
	 white-space: nowrap;
	 text-overflow: ellipsis;
	 overflow: hidden;
}

在需要的地方调用：

MyMar为定时方法
当鼠标滑进noticeList的div之后，移除MyMar定时方法
鼠标滑出后，重新设定定是方法

var MyMar = setInterval("noticeUp('#noticeList ul','-15px',1000)", 3000);

document.getElementById("noticeList").onmouseover = function() {clearInterval(MyMar)}
document.getElementById("noticeList").onmouseout = function() {MyMar = setInterval("noticeUp('#noticeList ul','-15px',1000)", 3000)}