记录成长
分享快乐

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

 

赞(3) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » DUX主题首页添加滚动公告模块
分享到: 更多 (0)

评论 6

  • Q Q(选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #3

    博主,按照你的方法,添加了这个功能,但发现 首页右边侧边栏 和 首页焦点图 不在同一水平线上 楼主请问有什么办法可以使得 侧边栏第一个模块 向下移10px吗

    蓝色文字   | Windows NT | Chrome 64.0.3282.186 | 5个月前 (03-05)回复
    • @ 蓝色文字 调一下CSS样式吧。可能由于设置不同样式会有所偏差,自己调一下就好。

      蝈蝈要安静     | Windows 7 | Chrome 49.0.2623.87 | 5个月前 (03-05)回复
  2. #2

    感觉博主很不错哦!既有技术文章也有其他的,很好!

    明月清风   | Linux | Chrome 57.0.2987.132 | 6个月前 (02-11)回复
    • @ 明月清风 哈哈哈,一般也就是自己想学些什么就记录一下,随心情。

      蝈蝈要安静     | Windows 7 | Chrome 49.0.2623.87 | 5个月前 (03-05)回复
  3. #1

    如果我不想要后台选项 把代码写死呢?

    Parkmimi   | Windows NT | Chrome 63.0.3239.132 | 7个月前 (01-29)回复

蝈蝈要安静——一个不学无术的伪程序员!

联系我们给我留言

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏