您的位置：首页 > Web前端 > JavaScript

JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果

2013-04-23 11:06 686 查看

新浪微博大厅和腾讯微博首页的微博消息渐显渐隐的向下滚动效果还是挺不错的，淡静又不显得花哨，个人感觉非常实用。于是乎用 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 文档即可看到效果，具体效果可参照：
http://www.phpernote.com/javascript-function/677.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 模拟微博大厅消息滚动

相关文章推荐

新的分享

章节导航