新浪微博滚动特效[兼容FF,Chrome和IE6,7,8]代码,JS代码库,德仔网

代码语言

代码分类

【JS】新浪微博滚动特效[兼容FF,Chrome和IE6,7,8]

作者:Dezai.CN / 发布于2013/10/22/ 436


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>JS实现新浪微博首页滚动js特效代码</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<style type="text/css">
	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>
	<script type="text/javascript">
	 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>
	<div class="wp">
	 <ul id="slider" class="slider">
	 <li><a class="fl" href="javascript:;"><img src="123.gif" alt=""/></a>
	 曾虑多情损梵行<br/>
	 入山又恐别倾城<br/>
	 世间安得双全法<br/>
	 不负如来不负卿
	 </li>
	 <li><a class="fl" href="javascript:;"><img src="123.gif" alt=""/></a>
	 第一最好不相见，如此便可不相恋。 第二最好不相知，如此便可不相思。 <br/>
	 第三最好不相伴，如此便可不相欠。 第四最好不相惜，如此便可不相忆。 <br/>
	 第五最好不相爱，如此便可不相弃。
	 </li>
	 <li><a class="fl" href="javascript:;"><img src="123.gif" alt=""/></a>
	 新鲜代码站提供各种JavaScript/CSS特效代码。 <br/>
	 以及常用软件下载等，做有质量的学习型源码下载站。
	 </li>
	 <li><a class="fl" href="javascript:;"><img src="123.gif" alt=""/></a>
	 今天天气不错，我们都出来郊游了，可不一会就下起了雨，都淋湿了，但心情很爽噢。<br/>
	 必竟我们不怎么出来玩，一出来就碰到了雨，很荣幸哦！
	 </li>
	 </ul>
	</div>
	<script type="text/javascript">
	 new slider({
	 id: 'slider'
	 })
	</script>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　滚动特效　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)