给你的Emlog博客加个底部滚动公告栏

2011-12-07 3163点热度 0人点赞 0条评论

这个公告栏有两个主要特点，一是在公告栏左边滚动显示随机日志，随机显示条数可以在后台的widgets里设定，也就是跟侧栏的随机日志的显示条数一样的；二是公告栏右边有个社会化分享工具，而且是非第三方的，安全有保障。怎样加入到你的模板，这里我提供两个方法，

第一：

首先你得保证能成功加载JQ库，这个是必须的。

下面是CSS样式

/** 公告 **/
#gg{position:fixed;bottom:0;background:#000;width:100%;height:23px;line-height:23px;z-index:9999;opacity:.60;filter:alpha(opacity=60);_bottom:auto;_width:100%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));box-shadow:10px 0 5px #000;}
#gg a{color:#fff;font-size:13px;letter-spacing:2px;text-shadow:0 1px 0 #000;}
.close a{float:right;margin:0 10px 0 0;}
.bulletin{float:left;height:23px;color:#fff;margin:0 0 0 20px;background:url(images/bulletin.gif) no-repeat;min-height:23px;overflow:hidden;}
.bulletin li{height:23px;padding-left:25px;}
/** 公告正文 **/
.archive_box_z{font-size:13px;padding:10px;}
.archive_title_box_b{width:948px;}
.archive_title_b{float:left;}
.archive_info_b{float:right;}
.archive_b{width:948px;margin:10px 0 0;}
.clear12{padding:5px;}
.author_a img{float:left;margin:3px 5px 0 0;}

/** 公告 **/

#gg{position:fixed;bottom:0;background:#000;width:100%;height:23px;line-height:23px;z-index:9999;opacity:.60;filter:alpha(opacity=60);_bottom:auto;_width:100%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));box-shadow:10px 0 5px #000;}

#gg a{color:#fff;font-size:13px;letter-spacing:2px;text-shadow:0 1px 0 #000;}

.close a{float:right;margin:0 10px 0 0;}

.bulletin{float:left;height:23px;color:#fff;margin:0 0 0 20px;background:url(images/bulletin.gif) no-repeat;min-height:23px;overflow:hidden;}

.bulletin li{height:23px;padding-left:25px;}

/** 公告正文 **/

.archive_box_z{font-size:13px;padding:10px;}

.archive_title_box_b{width:948px;}

.archive_title_b{float:left;}

.archive_info_b{float:right;}

.archive_b{width:948px;margin:10px 0 0;}

.clear12{padding:5px;}

.author_a img{float:left;margin:3px 5px 0 0;}

下面是js代码

// 文字滚动
    (function($){
    $.fn.extend({
    Scroll:function(opt,callback){
    if(!opt) var opt={};
    var _this=this.eq(0).find("ul:first");
    var        lineH=_this.find("li:first").height(),
    line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
    speed=opt.speed?parseInt(opt.speed,10):7000, //卷动速度，数值越大，速度越慢（毫秒）
    timer=opt.timer?parseInt(opt.timer,10):7000; //滚动的时间间隔（毫秒）
    if(line==0) line=1;
    var upHeight=0-line*lineH;
    scrollUp=function(){
    _this.animate({
    marginTop:upHeight
    },speed,function(){
    for(i=1;i<=line;i++){
    _this.find("li:first").appendTo(_this);
    }
    _this.css({marginTop:0});
    });
    }
    _this.hover(function(){
    clearInterval(timerID);
    },function(){
    timerID=setInterval("scrollUp()",timer);
    }).mouseout();
    }
    })
    })(jQuery);
    $(document).ready(function(){
    $(".bulletin").Scroll({line:1,speed:1000,timer:5000});//修改此数字调整滚动时间
    });

// 文字滚动

(function($){

$.fn.extend({

Scroll:function(opt,callback){

if(!opt) var opt={};

var _this=this.eq(0).find("ul:first");

var lineH=_this.find("li:first").height(),

line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),

speed=opt.speed?parseInt(opt.speed,10):7000, //卷动速度，数值越大，速度越慢（毫秒）

timer=opt.timer?parseInt(opt.timer,10):7000; //滚动的时间间隔（毫秒）

if(line==0) line=1;

var upHeight=0-line*lineH;

scrollUp=function(){

_this.animate({

marginTop:upHeight

},speed,function(){

for(i=1;i<=line;i++){

_this.find("li:first").appendTo(_this);

}

_this.css({marginTop:0});

});

}

_this.hover(function(){

clearInterval(timerID);

},function(){

timerID=setInterval("scrollUp()",timer);

}).mouseout();

}

})

})(jQuery);

$(document).ready(function(){

$(".bulletin").Scroll({line:1,speed:1000,timer:5000});//修改此数字调整滚动时间

});

这里是html代码，放到你模板的footer.php里。

<div id="gg">
  <div class="close"><a href="javascript:void(0)" onclick="$(’#gg’).slideUp(’slow’);" title="关闭">×</a>
    <div id="feedb">
    <a href="<?php echo BLOG_URL; ?>rss.php" title="欢迎订阅本站" class="image"><img src="<?php echo TEMPLATE_URL; ?>images/feed.gif" /></a>
    </div>
    <div class="weibo"><a class="sina_t" href="javascript:(function(){window.open(’http://v.t.sina.com.cn/share/share.php?title=’+encodeURIComponent(document.title)+’&url=’+encodeURIComponent(location.href)+’&source=bookmark’,’_blank’,’width=450,height=400’);})()"title="分享到新浪微博" rel="nofollow">新浪微博</a></div>
    <a class="qq_t" href="javascript:void(0);" onclick="window.open(’http://v.t.qq.com/share/share.php?title=’+encodeURIComponent(document.title.substring(0,76))+’&url=’+encodeURIComponent(location.href)+’&rcontent=’,’_blank’,’scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes’); " title="分享到腾讯微博" rel="nofollow" >分享到：腾讯微博</a></div>
  <?php
	$index_randlognum = Option::get(’index_randlognum’);
	$Log_Model = new Log_Model();
	$randLogs = $Log_Model->getRandLog($index_randlognum);?>
  <div class="bulletin">
    <ul>
      <?php foreach($randLogs as $value): ?>
      <li><a href="<?php echo Url::log($value[’gid’]); ?>" title="<?php echo $value[’title’]; ?>"><?php echo $value[’title’]; ?></a></li>
      <?php endforeach; ?>
    </ul>
  </div>
</div>

<a href="<?php echo BLOG_URL; ?>rss.php" title="欢迎订阅本站" class="image"><img src="<?php echo TEMPLATE_URL; ?>images/feed.gif" /></a>

</div>

<?php

$index_randlognum = Option::get(’index_randlognum’);

$Log_Model = new Log_Model();

$randLogs = $Log_Model->getRandLog($index_randlognum);?>

<ul>

<?php foreach($randLogs as $value): ?>

<li><a href="<?php echo Url::log($value[’gid’]); ?>" title="<?php echo $value[’title’]; ?>"><?php echo $value[’title’]; ?></a></li>

<?php endforeach; ?>

</ul>

</div>

上面的各种代码具体怎样插入到你的模板你自己看着办吧，我就不?嗦了。

打开后按右键另存到本地，上传到你模板的images文件夹里，注意文件名。

第二：

这个我把js和CSS都做成一份文件，首先到下面下载附件，解压出来后上传到你的模板目录，然后打开header.php，在<head>到</head>之间增加两句代码加载CSS和js文件。分别是

<link rel="stylesheet" type="text/css" media="all" href="<?php echo TEMPLATE_URL; ?>gg.css" />
<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js.js"></script>

1 2	<link rel="stylesheet" type="text/css" media="all" href="<?php echo TEMPLATE_URL; ?>gg.css" /> <script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js.js"></script>