WordPress添加滚动公告栏

将示例的代码保存为 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&nbsp;&nbsp;</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>

本站效果图(备用):

《WordPress添加滚动公告栏》

发表评论

电子邮件地址不会被公开。 必填项已用*标注