首页 > 代码库 > 公告栏翻滚显示
公告栏翻滚显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } body{font-size: 14px;font-family: "yahei";} a { text-decoration: none; } .clearfix{*zoom:1;} .clearfix:after,.clearfix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;} .fl{float:left;} .fr{float:right;} /* 公告 */ .notice-zb{ width:1190px; height:60px; margin:50px auto; background: #f9f9f9; line-height: 60px; overflow:hidden; color:#5e0000; font-size: 14px; } .notice-zb .imgtxt{ display: inline-block; width:132px; } .notice-zb img.naba{ display: inline-block; width: 29px; height: 25px; margin:0px 12px 0 20px; } .notice-zb ul{ height:100%; display: inline-block; width:1045px; padding-right:8px; } .notice-zb ul li{ width:100%; height:100%; line-height: 60px; } .notice-zb ul li a{ color:#5e0000; } .notice-zb ul li a:hover{ /*text-decoration: underline;*/ color:#d71326; } </style></head><body><!-- 公告 --><div class="notice-zb "> <span class="imgtxt fl"><img class="naba" src="" >公告信息：</span> <ul class="fl"> <li class="clearfix">1.查询模块菜单名称更新公告<a href="" target="_blank" class="fl"></a><span class="fr">2017/01/19</span></li> <li class="clearfix">2.新旧名称对照表<a href="" target="_blank" class="fl"></a><span class="fr">2017/01/20</span></li> <li class="clearfix">3.新旧名称对照表<a href="" target="_blank" class="fl"></a><span class="fr">2017/01/20</span></li> </ul></div><script> //公告滚动 (function(){ var timer; auto(); function auto(){ timer = setInterval(function(){ var oUl = $(‘.notice-zb ul‘); var aLi = oUl.find(‘li‘); var oHeight = aLi.eq(0).height(); oUl.animate({‘marginTop‘:-oHeight + ‘px‘},500,function(){ oUl.css(‘marginTop‘,‘0px‘).find(‘li:first‘).appendTo(oUl); }); },3000); } $(‘.notice-zb‘).mouseenter(function(){ clearInterval(timer); }).mouseleave(function(){ auto(); }); })();</script> </body></html>不过这种写法当页面长期打开时，会有bug！
公告栏翻滚显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。