将示例的代码保存为 gonggao.php,放到主题目录下,然后在需要显示公告的位置调用:
<?php include (TEMPLATEPATH . '/gonggao.php'); ?>
以上文件路径我是放在这题根目录下,自己根据位置自行调整。
CSS需要根据自己的主题适当调整,这个没有后台,需要更改公告信息的话,直接修改此文件。
滚动速度在JS的 8000 那个值调整,这边是 8 秒。
有一个缺点就是鼠标悬停在公告信息上的时候还是会继续滚动,我想让它停下来,不会改。
<style> .gonggao_news{ padding-right:15px; } #announcement_box { position: relative; background: #FFF; padding-left: 15px; width: 100%; height: 30px; margin-bottom:0.5em; } .news_volume{ float:left; } #announcement { box-sizing:border-box; height:25px; margin-top: 2px; line-height:25px; overflow: hidden; float:left; width: 90%; overflow: hidden; } #announcement a { } #announcement a:hover { color:#94382B; } .announcement_remove { position: absolute; padding:1px 4px; float:right; font-size:14px; right:0px; } .announcement_remove a { height:18px; width:18px; display:block; line-height:18px; margin:6px 4px 4px 4px; text-align:center; } .announcement_remove a:hover { background-color:#FFF; color:#FF0000; font-size:20px } #announcement_close { color:#666; } #announcement span { color:#666; } #announcement ul { list-style-type:none; font-size:14px; } @media screen and (max-width:768px) { .gonggao_news{ padding-right:5px; padding-left:5px; } #announcement { width: 85%; } } </style> <div class = "gonggao_news" id="gonggao_news_id"> <div id="announcement_box" class="ption_a"> <div class = "news_volume"><i class="fa fa-volume-up" aria-hidden="true"></i> </div> <div id="announcement"> <ul style="margin-top: 0px; padding-left:15px;"> <li><span > </span>上线<a href="http://py.guihet.com/" target="_blank" rel="noopener noreferrer">在线支付</a>系统!</li> <li><span > 04-07 </span>黑鸟播放器 v1.7.3 发布!欢迎体验</li> </ul> </div> <div class="announcement_remove"><a title="关闭" href="javascript:void(0)" rel="external nofollow" onClick="$('#announcement_box').slideUp('slow');"><span id="announcement_close">×</span></a></div> </div> </div> <script> //-https://www.guihet.com/ function AutoScroll(obj){ $(obj).find("ul:first").animate({ marginTop:"-25px" },500,function(){ $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }); } $(document).ready(function(){ setInterval('AutoScroll("#announcement")',8000) }); </script>
本站效果图(备用):