<!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>
</head>
<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>
JS实现模拟新浪微博和腾讯微博首页滚动
最新推荐文章于 2021-03-17 02:36:51 发布