页面底部固定无抖动调用公告特效
曾经写过一篇《纯CSS代码实现页面底部固定无抖动漂浮特效》，一直没有实际应用一下！今天头疼，忽然来了灵感，准备把微博给调用过来，无聊的整合一下！
先上个图，来个效果！
既然是固定无抖动，那就先用到CSS样式了，再复习一下固定无抖动的部分：
<style type="text/css">
#haibor_fix_bar { position:fixed; bottom:0;/*置顶top:0*/ }
</style>
<!--[if ie 6]>
<style>
/*text.txt for IE6 防抖*/
body { background-image:url(text.txt); background-attachment:fixed; }
/*置底*/
#haibor_fix_bar { width:101.3%; bottom:0; position:absolute; top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); }
/*置顶*/
/*#haibor_fix_bar { width:101.3%; top:0; position:absolute; top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+"px"); }*/
</style>
<![endif]-->
接着就是滚动的部分了，这里滚动的方法有很多，我还是把以前的文章介绍的方法拖出来分享一下，传送门：为博客首页添加间歇停顿滚动公告栏 [兼容主流浏览器]，需要注意的是，这个JS代码需要在滚动文字代码之后调用，否则无滚动效果！当然你也可以用JQuery来实现！这里贴一下JS代码，注意其中红色的 haibor_info2 需要与具体层的 ID 对应！
function haibor_scroll(lh,speed,delay) {
// 参数：lh为行高line-height，speed为滚动速度，delay为延迟、停顿的时间
var p=false;
var t;
var o=document.getElementById("haibor_info2");
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);
}
haibor_scroll(40,10,3000);
最后贴出来这个整合后的层代码：
<div id="haibor_fix_bar"> <div id="haibor_sns"> <ul> <li><a id="sns_tencent" href="http://t.qq.com/haibor" target="_blank" title="腾讯微博"></a></li> <li><a id="sns_sina" href="http://weibo.com/87005971" target="_blank" title="新浪微博"></a></li> <li><a id="sns_rss" title="订阅本站" target="_blank" href="https://yangjunwei.com/feed"></a></li> <!-- <li><a id="sns_close" href="javascript:void(0)" onclick="$('#haibor_fix_bar').slideUp('slow');" title="关闭">×</a></li> --> </ul> </div> <div id="haibor_info"> <ul id="haibor_info2"> <li><a href="#" target="_blank">诺豆网络IDC业务全新上线：http://idc.nuodou.com</a></li> <li><a href="#" target="_blank">朋友们，五一快乐！好好休息！出个域名：Topzixun.com，可送程序数据！</a></li> <li><a href="#" target="_blank">最近GG走了，PR也降了，百度却更青睐nuodou了，日志发表10分钟后即收录，加油！</a></li> </ul> </div> </div>
完整代码详见DEMO演示，这里就不啰嗦了！无聊的可留言交流！！其中的sns图片来源于 wange.im ，这里感谢他在不知情的情况下，被我小用了一下。
