JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果
新浪微博大厅和腾讯微博首页的微博消息渐显渐隐的向下滚动效果还是挺不错的，淡静又不显得花哨，个人感觉非常实用。于是乎用 javascript 也模拟实现了新浪微博和腾讯微博那种消息滚动的效果。现将代码贴在下面，感兴趣的朋友可以试试。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS实现模拟新浪微博和腾讯微博首页滚动效果_www.phpernote.com</title>
<style type="text/css">
*{ margin:0;padding:0;}
body{ font:12px/1.8 Arial;color:#666;margin:0;height:100%;background:#333;}
.wrapper{padding:50px;}
ul,li{margin:0;padding:0;list-style:none}
.wp{position:relative;width:800px;height:400px;overflow:hidden;margin:20px auto;border:4px solid #121212;background:#fff;}
.slider{position:absolute;width:760px;padding:0 20px;left:0;top:0;}
.slider li{padding:20px 0;border-bottom:1px dashed #ccc;overflow:hidden;width:100%}
</style>
<script type="text/javascript">
function H$(i){return document.getElementById(i)}function H$$(c,p){return p.getElementsByTagName(c)}var slider=function(){function inits(o){this.id=o.id;this.at=o.auto?o.auto:3;this.o=0;this.pos()}inits.prototype={pos:function(){clearInterval(this.__b);this.o=0;var el=H$(this.id),li=H$$("li",el),l=li.length;var _t=li[l-1].offsetHeight;var cl=li[l-1].cloneNode(true);cl.style.opacity=0;cl.style.filter="alpha(opacity=0)";el.insertBefore(cl,el.firstChild);el.style.top=-_t+"px";this.anim()},anim:function(){var _this=this;this.__a=setInterval(function(){_this.animH()},20)},animH:function(){var _t=parseInt(H$(this.id).style.top),_this=this;if(_t>=-1){clearInterval(this.__a);H$(this.id).style.top=0;var list=H$$("li",H$(this.id));H$(this.id).removeChild(list[list.length-1]);this.__c=setInterval(function(){_this.animO()},20)}else{var __t=Math.abs(_t)-Math.ceil(Math.abs(_t)*0.07);H$(this.id).style.top=-__t+"px"}},animO:function(){this.o+=2;if(this.o==100){clearInterval(this.__c);H$$("li",H$(this.id))[0].style.opacity=1;H$$("li",H$(this.id))[0].style.filter="alpha(opacity=100)";this.auto()}else{H$$("li",H$(this.id))[0].style.opacity=this.o/100;H$$("li",H$(this.id))[0].style.filter="alpha(opacity="+this.o+")"}},auto:function(){var _this=this;this.__b=setInterval(function(){_this.pos()},this.at*1000)}};return inits}();
</script>
<body>
<h1 class="tit-h1">JS实现模拟新浪微博大厅和腾讯微博首页滚动效果 www.phpernote.com</h1>
<div class="wrapper">
<div class="wp">
<ul id="slider" class="slider">
<li>入山又恐别倾城 世间安得双全 不负如来不负卿 </li>
<li>第一最好不相见，如此便可不相恋。 </li>
<li>那一天 闭目在经殿香雾</li>
<li>你见 或者不见我 我就在那里</li>
</ul>
</div>
</div>
<script type="text/javascript">new slider({id:'slider'});</script>
</body>
</html>
以上代码复制保存为 html 文档即可看到效果，效果如下图：
转载请注明出处：php程序员的笔记
最后修改时间：2013年05月25日 21时06分 文章来源：-わ千与千寻