页面底部固定无抖动调用公告特效
曾经写过一篇《纯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 ,这里感谢他在不知情的情况下,被我小用了一下。