要求

在最近的项目中，需要实现公告栏的滚动显示效果，如下所示：

解决办法

1、超文本标记语言

首先，构建一个div层作为公告显示区域，并在其中包装一个公告列表(ul)。

第一条、第一条、第一条、第一条、第一条、第二条、第二条、第二条、第二条、第二条、第二条、第三条、第三条、第三条、第三条、第三条、第三条、第三条、第四条、第四条、第四条、第四条、第四条

公告栏显示区的高度(35px)是固定的，每个公告信息的高度(li)也必须是这个高度(我在这里偷懒的时候用的是行高)，这个值以后会在js中用到。

div，ul，Li { margin : 0；padd : 0 }/*首先初始化默认样式*/。请注意{ width: 300px/*单线显示，无法隐藏*/height : 35px；/*固定公告牌显示区域的高度*/padd : 0 30px；背景-color : # b3effe；飞越：隐藏；}.注意ul Li { list-style : none；线高： 35px；/*以下为单行显示，超出隐藏*/display:块；white-space : nowrap；文本-overflow:省略号；飞越：隐藏；}3、JavaScript

封装函数noticeUp.js

使用jquery animate方法改变list ul的marginTop值，实现滚动效果；

知识点：

1.动画回调函数执行后要执行的函数。

2.appendTo()方法

在选定元素的末尾(仍在内部)插入指定的内容。

注意：如果指定的内容是当前页面中的一些元素，这些元素将从原始位置消失。简而言之，这相当于移动操作，而不是复制操作。

/* * obj :动画的参数描述*节点，本例为ul* top :动画的高度，本例为-35px；注意向上滚动是负数* time :动画速度，也就是完成动画所花费的时间，在这个例子中是500毫秒，也就是marginTop从0到-35px * function :回调函数需要500毫秒，每次动画完成，marginTop都会归零，此时的第一个信息被添加到列表的末尾；* */函数通知(obj，top，time) { $(obj)。动画({ marginTop: top })，时间，函数(){ $(this)。css({marginTop:'0'})。find(':first ')。appendTo(这个)；})}4.封装函数的调用

首先介绍了jQuery库及其自带的封装插件

计时器设置时间间隔用于控制显示公告信息的时间间隔，在本例中为2000毫秒

script src=' http :https://cdn . bootcss.com/jquery/3 . 2 . 1/jquery . min . js '/script script src=' http : noticeup . js '/script $(function(){//调用公告滚动函数setinterval(' note up ')。注意ul '，'-35px '，500 ')，2000)；});/script更多滚动公告方法：

//www . JB 51 . net/article/129733 . htm

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。