新浪微博大厅和腾讯微博首页的微博消息渐显渐隐的向下滚动效果还是挺不错的，淡静又不显得花哨，个人感觉非常实用。于是乎用 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 文档即可看到效果，效果如下图：
零七网部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与零七网进行文章共享合作。
