JavaScript는 Sina Weibo 로비 및 Tencent Weibo 홈페이지 스크롤 특수 효과 소스 코드_javascript 기술을 모방하여 구현합니다.

JavaScript는 로그인 없이 시나 웨이보 로비와 텐센트 웨이보 홈페이지를 흉내내는 스크롤 효과를 구현합니다요즘 이 기능이 필요한 친구들이 많은 것 같은데, 제가 요 며칠간 포스팅을 몇 개 올렸는데요. 그 효과는 jquery로 달성한 "jQuery 상향 순환 스크롤(Sina Weibo의 로그인되지 않은 홈페이지 스크롤 Weibo 표시 모방)"입니다. 오늘은 이것이 js로 만들어진 것임을 발견했습니다. 좋아할 것입니다.

렌더링은 아래와 같습니다.

데모 보기 소스 코드 다운로드

HTML 코드

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

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;}

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;
}();

위 내용은 Sina Weibo 로비 및 Tencent Weibo 홈페이지 스크롤 특수 효과 소스 코드를 구현하기 위해 편집자가 공유한 JavaScript 소스 코드입니다.