当前位置: 首页 > Web前端 > HTML

JS实现信息滚动效果

时间:2023-04-02 14:22:50 HTML

a{text-decoration:none;}.notice{宽度:840px;保证金:0自动;顶部边距:10px;高度:45px;}.notice_title{颜色:#fff;font-family:"微软雅黑";字体大小:16px;顶部边距:10px;填充:5px8px5px20px;文本对齐:居中;背景色:#025483;宽度:120px;向左飘浮;}.notice_list{宽度:680px;浮动:对;高度:33px;溢出:隐藏;}.notice_listli{list-style-type:none;高度:33px;}.notice_lista:link,.notice_lista:visited{颜色:#333;字体大小:16px;}.notice_lista:hover,.notice_lista:active{颜色:#025483;字体粗细:粗体;}.date{颜色:#888;字体大小:14px;浮动:对;}一开始觉得这个效果不难实现,用scrollTop和timer就可以了,但是写完代码还是实现不了内容的滚动效果。反复检查JS代码,没问题。休息了一会儿,又开始整理思绪,从HTML代码开始,一步步检查,突然发现CSS样式写错了,代码如下:通知公告

  • 西南交通大学公告面向国内外公开招聘部分管理岗位(2016年第4期)2016-09-27
  • 关于沱江停水及西浦校区人工湖水位情况的通报2016-09-27
  • 关于组织开展2016年国庆“老年健步走”活动的通知2016-09-27
  • 关于《交通领域发展现状与干部成长》课通知2016-09-27
应该设置id="notice_list_content"的div宽度和高度,而不是class="notice"的div宽度和高度。调整后成功实现信息滚动效果完整代码如下:a{text-decoration:none;}.notice{宽度:840px;保证金:0自动;顶部边距:10px;高度:45px;}.notice_title{颜色:#fff;font-family:"微软雅黑";字体大小:16px;顶部边距:10px;填充:5px8px5px20px;文本对齐:居中;背景色:#025483;宽度:120px;向左飘浮;}.notice_list{宽度:680px;浮动:对;高度:33px;溢出:隐藏;}.notice_listli{list-style-type:none;高度:33px;}.notice_lista:link,.notice_lista:visited{颜色:#333;字体大小:16px;}.notice_lista:hover,.notice_lista:active{颜色:#025483;字体粗细:粗体;}.date{颜色:#888;字体大小:14px;浮动:对;}通知公告
var区=document.getElementById('notice_list_content');area.innerHTML+=area.innerHTML;area.scrollTop=0;可变计时器;函数startMove(){timer=setInterval(scrollUp,50);area.scrollTop++;}functionscrollUp(){if(area.scrollTop%33===0){clearInterval(timer);设置超时(开始移动,1000);}else{area.scrollTop++;如果(area.scrollTop>=area.scrollHeight/2){area.scrollTop=0;}}}setTimeout(startMove,1000);