需求
在最近的项目中需要实现公告栏滚动显示效果如下：
解决方案
1、 HTML
先建一个div层作为公告显示区，里面包裹一个公告列表(ul);
- 第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告
- 第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告
- 第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告
- 第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告
2、 CSS
固定公告栏显示区域的高度(35px),每条公告信息(li)的高度也必须是这个高度(我这里偷懒就用了行高)，后面js中还要用到这个值。
div,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
.notice {
width: 300px;/*单行显示，超出隐藏*/
height: 35px;/*固定公告栏显示区域的高度*/
padding: 0 30px;
background-color: #b3effe;
overflow: hidden;
}
.notice ul li {
list-style: none;
line-height: 35px;
/*以下为了单行显示，超出隐藏*/
最后
以上就是鲤鱼冰淇淋最近收集整理的关于html通知公告向上滚动,利用10行js代码实现上下滚动公告效果的全部内容，更多相关html通知公告向上滚动内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复