• 注册
热门标签
↑ 收起导航

页面底部固定无抖动调用公告特效

曾经写过一篇《纯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="http://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 ,这里感谢他在不知情的情况下,被我小用了一下。

版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/597.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

14 条评论 »

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册