DUX主题主页添加翻滚公告模块

	

		

			<?php $sitemsg = explode(PHP_EOL,_hui(\'qgg_announcement\'));
				foreach ($sitemsg as $value) {
					echo \'
&nbsp&nbsp\'.stripslashes($value).\'
\';
				} 
			?>
		
	

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

增加后台设置选项

因为翻滚公告闪现的内容一般也就3、4篇文章，这儿为了便当管理我在后台增加了一个选项，我们只需在后台运用 a 标签输入需求闪现的公告内容即可。完结的代码与我之前的文章 DUX主题主页增加抢手文章模块 完结方法一样，这儿为了便当我直接将代码放在这篇文章中相关代码的下面，具体代码为：

	$options[] = array(
		\'name\' => \'网站翻滚公告\',
		\'desc\' => \'每行一条，回车换行即可。不明白？点击这儿 中止留言。\',
		\'id\' => \'qgg_announcement\',
		\'std\' => \'蝈蝈要安静 | 一个不学无术的伪程序员\',
		\'type\' => \'textarea\');

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

增加JavaScript脚本

接下来是翻滚公告的中心代码，一段 JS 脚本完结文章列表翻滚的作用。

    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 标签去掉直接丢到主题 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;}
}