100字范文 > [JS+CSS] - 新浪微博滚动特效[兼容FF Chrome和IE6 7 8]

[JS+CSS] - 新浪微博滚动特效[兼容FF Chrome和IE6 7 8]

时间：2020-03-29 18:17:26

来源：网络

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">

<html>

<head>

<title>JS实现新浪微博首页滚动js特效代码</title>

ul, li {

margin:0;

padding:0;

list-style:none

}

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>

function H$(i) {

return document.getElementById(i)

}

function H$$(c, p) {

return p.getElementsByTagName(c)

}

var slider =function() {

function init(o) {

this.id = o.id;

this.at = o.auto ? o.auto: 3;

this.o =0;

this.pos();

}

init.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 init;

} ();

</script>

</head>

<body>

<p>曾虑多情损梵行<br/>

入山又恐别倾城<br/>

世间安得双全法<br/>

不负如来不负卿</p>

</li>

<p>第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 <br/>

第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 <br/>

第五最好不相爱，如此便可不相弃。

</li>

<p>新鲜代码站提供各种JavaScript/CSS特效代码。 <br/>

以及常用软件下载等，做有质量的学习型源码下载站。</p>

</li>

<p>今天天气不错，我们都出来郊游了，可不一会就下起了雨，都淋湿了，但心情很爽噢。<br/>

必竟我们不怎么出来玩，一出来就碰到了雨，很荣幸哦！</p>

</li>

</ul>

</div>

new slider({

id: 'slider'

})

</script>

</body>

</html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。