DUX主题首页添加滚动公告模块

如题，应朋友的要求出一篇DUX主题添加滚动公告的博文。关于滚动公告的实现方式网上有很多相关代码，就原理来看都是通过生成一个文章标题列表，然后通过 CSS 隐藏掉不需要的文章只保留一篇文章标题显示，最后通过JS代码实现列表内文章滚动显示的。下面我们就来看下DUX主题的具体实现方式。

此次对主题的修改操作主要修改了 main.css 、index.php 、options.php 文件大家在进行操作前还是先备份一下文件以防误操作引起的网站崩溃。

添加前端显示代码

将一下代码添加到主题的 index.php 文件中合适的位置处，我这里添加到了 <div class=”content”> 之后了，具体位置大家依据自己喜欢而定。

<section class="qgg_scroll">
	<div id="qgg_scroll_list">
		<div style="list-style: none;">
			<?php $sitemsg = explode(PHP_EOL,_hui('qgg_announcement'));
				foreach ($sitemsg as $value) {
					echo '<li><i class="fa fa-volume-up fa-lg" aria-hidden="true" style="color:#ff6666"></i>&nbsp&nbsp'.stripslashes($value).'</li>';
				} 
			?>
		</div>
	</div>
</section>

代码的主要作用就是获取下面后台选项中的内容生成一个文章列表。

添加后台设置选项

由于滚动公告显示的内容一般也就3、4篇文章，这里为了方便管理我在后台添加了一个选项，大家只要在后台使用 a 标签输入需要显示的公告内容即可。实现的代码与我之前的文章 DUX主题首页添加热门文章模块 实现方式一样，这里为了方便我直接将代码放在这篇文章中相关代码的下面，具体代码为：

	$options[] = array(
		'name' => '网站滚动公告',
		'desc' => '每行一条，回车换行即可。不明白？<a href="http://blog.quietguoguo.com">点击这里</a> 进行留言。',
		'id' => 'qgg_announcement',
		'std' => '<a href="http://blog.quietguoguo.com">蝈蝈要安静 | 一个不学无术的伪程序员</a>',
		'type' => 'textarea');

细心的同学可能会发现，这里没有 heading 也就是说这里只给出了按钮的代码，Options Framework 框架默认是使用的上一个 heading ，所以这里选项按钮的具体位置要看你上面代码中的选项按钮是在后台那个选项卡下了。

添加JavaScript脚本

接下来是滚动公告的核心代码，一段 JS 脚本实现文章列表滚动的效果。

<script type="text/javascript">

    function qgg_marquee(){ 
        var t; 
        var p=false; 
        var o=document.getElementById("qgg_scroll_list");
        if (o = ""){return;} 
        o.innerHTML+=o.innerHTML; 
        o.onmouseover=function(){p=true} 
        o.onmouseout=function(){p=false} 
        o.scrollTop = 0; 
        function start(){ 
            t=setInterval(scrolling,30); 
            if(!p){ o.scrollTop += 1;} 
        } 
        function scrolling(){ 
            if(o.scrollTop%20!=0){ 
            o.scrollTop += 1; 
            if(o.scrollTop>=o.scrollHeight/2)
                o.scrollTop = 0; 
            }else{ 
                clearInterval(t); 
                setTimeout(start,3000);//设置滚动时间 
            } 
        } 
        setTimeout(start,3000); //设置滚动时间
    }
    $(document).ready(qgg_marquee);

</script>

将上面这段代码直接扔到主题后台自定义代码中去，或者你也可以把代码中的 script 标签去掉直接丢到主题 js 文件夹下的 main.js 文件中去。

添加CSS样式

最后我们只需要添加如下样式至 main.css 文件中即可：

/*首页滚动公告*/
#qgg_scroll_list{
    height:20px;
    overflow:hidden;
    line-height:20px;
    text-overflow: ellipsis;
	word-break: break-all;
    white-space: nowrap;
}
#qgg_scroll_list li{
    overflow:hidden;
    text-overflow: ellipsis;
	word-break: break-all;
    white-space: nowrap;
}

#qgg_scroll_list a{
    color:rgba(36, 160, 240, 1);
    padding: 0 5px;
}
.qgg_scroll_zone{
    float:left;
    line-height:20px;
    margin:0 20px 0 0;
    padding: 0;
    color: #fff;
    font-size: 20px;
}
.qgg_scroll {
    width: 100%;
    margin: 0 5px;
    position: relative;
    padding: 0px 0px 13px 3px;
    border-radius: 3px;
}
@media (max-width: 560px) {
.qgg_scroll {padding:3px;}
}