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;}
}

感谢您的来访，获取更多精彩文章请收藏本站。