JavaScript to achieve the imitation Sina Micro-broad Hall and Tencent Micro-blog homepage scrolling effects source _javascript Tips

JavaScript to achieve the micro-Sina Weibo and Tencent Micro-blog Home scrolling effect , seemingly these days there are many friends need this function, a few days ago has been sent a few, but that one effect is implemented with jquery jquery Up-loop scrolling (imitation Sina Weibo not login home scrolling micro-bo display), today found this is a good JS production, do not dare to enjoy, I hope the need for friends like OH.

The effect chart shows the following:

View Demo Source Download

HTML code

<div class= "WP" >
<ul id= "slider" class= "Slider" >
<li><a class= "FL" href= "javascript:;" ></a>
<p> Into the mountains and fear not to the world Ann is not negative tathagata </p>
 </li>
<li><a class= "FL" href= "javascript:;" ></a>
<p> The first best not to meet, so you can not love. </p>
</li>
<li><a class= "FL" href= "javascript:;" ></a>
<p> that day Close your eyes in the Temple incense Mist </p>
 </li>
<li><a class= "FL" href= "javascript:;" ></a>
<p> You see Or don't see me I'll Be there </p>
</li>
</ul>
</div>
<script type= "Text/javascript" >
new slider ({id: ' Slider '})

CSS Code

UL, Li {margin:0;padding:0;list-style:none}
a{color: #fff;}
Body {margin:0;height:100%;background: #333;}
. 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}
. FL {float:left}
. slider img {display:block; padding:2px border:1px solid #ccc} 
. Slider li {padding:20px 0; Bor der-bottom:1px dashed #ccc overflow:hidden;width:100%}
slider p {font-size:12px;margin:0;padding-left:68px; Color: #333; line-height:20px;}

JS Code

function h$ (i) {return document.getElementById (i)} function h$$ (c, p) {return p.getelementsbytagname (c)} var slider = Fu Nction () {function inits (o) {this.id = o.id; this.at = O.auto? o.auto:3; this.o = 0; This.pos (); alert (o);} inits. Prototype = {Pos:function () {clearinterval (this.__b); this.o = 0; var el = h$ (this.id), Li = h$$ (' li ', el), L = Li.le
Ngth;
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 ()},}, 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);
This.auto (); }else {var __t = Math.Abs (_T) –math.ceil (Math.Abs (_t) *.07);
h$ (this.id). Style.top =-__t + ' px ';
}, Animo:function () {THIS.O + = 2; if (THIS.O = n) {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;
 }();

The above content is small series to share the JavaScript to realize the Sina Micro-broad Hall and Tencent Micro-blog Home scrolling effect source code, I hope you like.