• Register

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

曾经写过一篇《纯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 条评论 »

  • 廖雪琴
    2015/12/17 at 16:34:01

    不错,顶的人不多啊,快点继续

  • 陈龙飞
    2011/09/01 at 09:23:14

    CSS 我不懂,这些代码放到哪里呢?

    • 头像来自 新浪微博
      haibor
      2011/09/01 at 09:24:33

      @陈龙飞 wp模板里!想要全站展示可添加在footer.html

  • 小说排行榜
    2011/05/24 at 23:09:51

    支持你的博客

  • 微酷博客
    2011/05/23 at 21:01:54

    嘎嘎,这文章内容合我胃口,收藏一下了,改天再来。

  • mbtshoes
    2011/05/23 at 00:00:03

    过来坐坐,。看看,学习一点

  • nhl jerseys
    2011/05/22 at 23:55:42

    做人就破破吧!难得这么轻松

  • nhl jerseys
    2011/05/22 at 19:57:00

    还是比较实用的,支持下博主……

  • 狐臭怎么治疗
    2011/05/20 at 10:54:55

    来看看~~支持下了

  • 遥控飞机
    2011/05/20 at 10:54:35

    来支持下了,学习了

  • Louis Han
    2011/05/18 at 21:24:49

    和万戈工具条很像啊

    • 头像来自 新浪微博
      nuodou
      2011/05/19 at 13:21:24

      @Louis Han 偷懒了,直接用了他的微博图片集!!

  • 集趣
    2011/05/18 at 21:22:16

    用来做广告,肯定吸引眼球

  • 奇豆网
    2011/05/18 at 15:14:23

    这个还是比较有用,弄个通知栏 还不占地方

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册