JavaScript melaksanakan meniru lobi Sina Weibo dan halaman utama Tencent Weibo menatal kesan khas kemahiran kod sumber_javascript

JavaScript melaksanakan kesan tatal meniru lobi Sina Weibo dan laman utama Tencent Weibo tanpa log masuk Nampaknya ramai rakan memerlukan fungsi ini beberapa hari lalu, tetapi yang Kesannya ialah "menatal pekeliling ke atas (tiruan halaman utama Sina Weibo yang menatal paparan Weibo)" dicapai dengan jquery Hari ini saya mendapati bahawa ini dibuat oleh js. Saya harap rakan-rakan yang memerlukannya akan menyukainya.

Penyampaian ditunjukkan di bawah:

Lihat demo Muat turun kod sumber

kod html

<div class="wp">
<ul id="slider" class="slider">
<li><a class="fl" href="javascript:;"><img src="/static/imghwm/default1.png"  data-src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50"  class="lazy" alt="" /></a>
<p>入山又恐别倾城 世间安得双全 不负如来不负卿</p>
 </li>
<li><a class="fl" href="javascript:;"><img src="/static/imghwm/default1.png"  data-src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50"  class="lazy" alt="" /></a>
<p>第一最好不相见，如此便可不相恋。</p>
</li>
<li><a class="fl" href="javascript:;"><img src="/static/imghwm/default1.png"  data-src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50"  class="lazy" alt="" /></a>
<p>那一天 闭目在经殿香雾</p>
 </li>
<li><a class="fl" href="javascript:;"><img src="/static/imghwm/default1.png"  data-src="http://t1.qlogo.cn/mbloghead/b9127c4ca63961bace88/50"  class="lazy" alt="" /></a>
<p> 你见 或者不见我 我就在那里 </p>
</li>
</ul>
</div>
<script type="text/javascript">
new slider({id:'slider'})
</script> 

kod css

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; border-bottom: 1px dashed #ccc;overflow:hidden;width:100%}
.slider p {font-size: 12px;margin:0;padding-left:68px;color:#333;line-height:20px;}

kod js

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();
alert(o);
}
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);
//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 == 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;
}();

Kandungan di atas ialah kod sumber JavaScript yang dikongsi oleh editor dengan anda untuk melaksanakan tiruan lobi Sina Weibo dan kod sumber kesan khas menatal halaman utama Tencent Weibo. Saya harap anda menyukainya.