<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/ 1.8 Arial;
color: #666;
}
.go-back {
text-align: center;
border-top: 1px dashed #ccc;
padding: 10px;
margin-top: 20px;
font-size: 40px;
}
li {
list-style: none;
}
.wrapper {
padding: 50px;
}
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;
}
</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();
//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;
}();
</script>
</head>
<body>
<div class="wrapper">
<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>
</div>
</body>
</html>
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
