^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 若文中代码有问题,可能是少了几个问号,留言一定会解决!
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 站点文章结尾新增了赞赏通道
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

WordPress添加上下滚动的公告

陌小雨曾经推荐过一款插件:WordPress 插件推荐:News announcement scroll,可以很方便的给 wordpress 添加公告,今天教大家添加一款简单的可以上下滚动的公告(感觉自定义文章类型添加公告的那篇太复杂,也没必要那么麻烦,故替换之,如有需要,请移步这里)。

WordPress 添加上下滚动的公告

一、功能代码

<style>
#announcement_box {background-color: rgba(240, 239, 215, 0.5);background-color: #E3DEC0 9;padding-left: 15px;width: 100%;height: 30px;border: 1px dashed #C1C0AB;border-radius: 2px;}
#announcement {background:url(https://dy.dedewp.com/wp-content/themes/xiu2.1/images/notice_icon.png) left center no-repeat scroll; height:25px; line-height:25px; overflow: hidden;float:left;}
#announcement a {color:#000;}
#announcement a:hover {color:#94382B;}
.announcement_remove {padding:1px 10px; float:right; font-size:14px;}
.announcement_remove a {height:18px; width:18px; display:block; line-height:16px; margin:4px 0 3px 0; margin:10px 0 3px 0 9; text-align:center;}
.announcement_remove a:hover {background-color:#cdc8a0; box-shadow:1px 1px 1px #66614c inset; -webkit-box-shadow:1px 1px 1px #666 inset; -moz-box-shadow:1px 1px 1px #666 inset; border-radius:3px;}
#announcement_close {color:#666;}
#announcement span {color:#666;}
#announcement ul {list-style-type:none}
</style>
<div id="announcement_box"  class="ption_a">
  <div id="announcement">
    <ul style="margin-top: 0px;">
       <li><span class="mr10"> 2015-4-25</span>友情提示:可以使用键盘左右方向键来浏览上一篇和下一篇文章</li>
       <li><span class="mr10"> 2015-4-24</span>老师上生物课,说到精子的结构和成分,老师说精子的主要成分是蛋白质,一女 生提问老师为什么不是甜的呢?全班爆笑,女生脸红跑出教室。</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>
<script>
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")',4000) 
});
</script>

二、代码使用说明

可以将上述代码保存为 notice.php,放到主题根目录,然后在需要显示公告的位置用下面代码调用即可

<?php include (TEMPLATEPATH . '/notice.php'); ?>

代码中的结构

 <li><span class="mr10"> 2015-4-25</span>友情提示:可以使用键盘左右方向键来浏览上一篇和下一篇文章</li>
<li><span class="mr10"> 2015-4-24</span>老师上生物课,说到精子的结构和成分,老师说精子的主要成分是蛋白质,一女 生提问老师为什么不是甜的呢?全班爆笑,女生脸红跑出教室。</li>

需要自己手动添加修改。

 

让小雨知道,这篇文章帮到了你

展开阅读全文

评论 6

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 陶子
    我试了一下,怎么文字不变化啊,能帮我看一下吗?回复
    • 陌小雨网站管理员
      @陶子 怎么看?回复
      • 陶子
        @陌小雨 帮我看一下,我的公告栏第二个及以后的内容闪一下就不显示了,谢谢,回复
        • 陌小雨网站管理员
          @陶子 嗯,看你已经搞好了回复
          • 陶子
            @陌小雨 嗯,谢谢,找到原因了,调出来数据的时候多了一个,后来调整了一下
  2. 小小吴
    能分享下你顶部右边那个音乐功能代码吗? 折腾了一夜博客,突然被你这音乐抖的睡意全无......回复
  3. 云落
    可以更简单的回复
    • 陌小雨网站管理员
      @云落 最要是css的问题,再简单也简单不到那里去吧,都得有html+css+js回复
  4. BOKE123
    自定义文章类型可以做很多事,而且很灵活,挺好用的回复
  5. 阿里衣橱
    很详细的教程 :mrgreen:回复

登录

忘记密码 ?

切换登录

注册