首先再次表扬一下强大而且易用的Z-Blog系统,微酷认为Z-Blog是ASP平台下最好用的博客程序,虽然人气不如WordPress高但是国内的Z-Blog用户还是相当多的,包括独立博客界知名的月光博客也是采用Z-Blog搭建的。

Z-Blog的模板和插件机制都非常棒,昨天晚上微酷花了些时间制作了首页滚动公告效果,现在分享下实现方法。

微酷原创Z-Blog首页滚动公告教程:

① 新建文件ANNOUNCE.HTML上传到博客当前主题INCLUDE文件夹下

② 这样就得到了显示公告的自建标签:

<#TEMPLATE_INCLUDE_ANNOUNCE#>

③ 编辑首页模板default.html将显示公告的自建标签插入到以下位置(如图)

④ 最后也是最重要的一步,编辑ANNOUNCE.HTML的内容如下:

<style>
#vcoo_anno
 {background:url("http://www.vcoo.me/THEMES/yofox/STYLE/yofox/notice_ico.gif") no-repeat left top; height:28px; line-height:28px; overflow: hidden; border: 1px #dddddd dashed; margin-left:5px; padding-left: 30px; margin-bottom: 10px;}
</style>
<div id="vcoo_anno">
<div id="vcoo_announce">
公告[2010年01月01日]:<font color="red">热烈祝贺微酷博客在2010新年到来的时候PR升到了5,新的一年继续努力…</font><br />
公告[2010年06月28日]:<font color="red">测试一下微酷博客公告滚动,感觉不错……</font><br />
</div></div>

<script>
//==================================================================================
// 目的:网站公告声明VC_Announce效果为:滚动一行停顿4秒,再滚动下一行
//==================================================================================
function ann_marquee(lh,speed,delay) {
 //lh为行高lineheight,speed为滚动速度,delay为延迟、停顿的时间
 var p=false;
 var t;
 var o=document.getElementById("vcoo_announce");
 o.innerHTML+=o.innerHTML;
 o.style.marginTop=0;
 o.onmouseover=function(){p=true;}
 o.onmouseout=function(){p=false;}
 
 function start(){
  t=setInterval(scrolling,speed);
  if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
 }
 
 function scrolling(){
  if(parseInt(o.style.marginTop)%lh!=0){
  o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
  if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
  }else{
  clearInterval(t);
  setTimeout(start,delay);
  }
 }
 setTimeout(start,delay);
}
ann_marquee(28,10,4000);
</script>

为了方便,微酷把所有代码都放到了一个文件,前面是CSS样式,中间是公告内容,最后是脚本函数,可根据自己需要修改。

说明一下,滚动公告是从诺豆网那里扒过来移植到Z-BLog的,在此感谢CCTV和诺豆同学。

最后看下效果:

目前有9 条留言

  1. 2010年07月01日 10:12 haibor   |  引用  |  #1     

    哈哈,我说看着怎么和我的很像呢!

    代码共享,说谢就见外了!

    ifu25 于 2010-7-1 21:56:22 回复

    嘎嘎,再怎么说也得吱一声啊,要不你看到会不开心的。

  2. 2010年07月01日 13:01 股票推荐   |  引用  |  #2     

    从诺豆那过来看看

  3. 2010年07月13日 18:57 炒股票   |  引用  |  #3     

    百度对Zblog是很优待的,排名很不错的

    ifu25 于 2010-7-14 6:28:40 回复

    我没有发现这个问题。

  4. 2010年07月18日 16:53 不痛博客   |  引用  |  #4     

    不错 正在使用

    ifu25 于 2010-7-18 20:20:43 回复

    嘎嘎,看到了……

  5. 2010年10月29日 22:21 电脑人生   |  引用  |  #5     

    谢谢分享 拿走咯

  6. 2010年11月19日 14:44 阅网博客   |  引用  |  #6     

    这文不错,推荐阅读!

  7. 2011年05月11日 08:32 肥股票   |  引用  |  #7     

    这个功能是不错,可以试试

  8. 2011年10月29日 10:35 王朋雨博客   |  引用  |  #8     

    我弄上啦,但是不知道怎么控制大小

  9. 2012年02月23日 16:31 sg   |  引用  |  #9     

    我怎么没找到
    default.html
    里面的那段代码呢?

发表评论

/ 快捷键:Ctrl+Enter
加载中……