新浪微博大廳文字內容滾動 tweets-slide

2024-09-05 12:18:04

字體：大中小

來源：轉載

供稿：網友

新浪微博大廳滾動tweets-slide，JavaScript實現，貌似這些天有不少朋友需要這功能，前幾天已經發了幾個了，不過今天發現這款竟然還要好，不敢獨享，希望需要的朋友喜歡哦。

<!doctype html><html><head><title>新浪微博大廳滾動tweets-slide</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   id="xdnhbrn"   class="wp">	<ul id="slider" class="slider">		<li><img src="http://www.aspku.com/jscss/demoimg/201011/u160412.jpg" alt="" />			<p>曾慮多情損梵行　　   入山又恐別傾城　　   世間安得雙全法　　   不負如來不負卿</p>		</li>		<li><img src="http://www.aspku.com/jscss/demoimg/201011/u160412.jpg" alt="" />			<p>第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。<br/> 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。<br/> 第五最好不相愛，如此便可不相棄。 		</li>		<li><img src="http://www.aspku.com/jscss/demoimg/201011/u160412.jpg" alt="" />			<p>源碼愛好者提供各類編程源碼、書籍教程、JavaScript/CSS特效代碼。<br/>以及常用軟件下載等，做有質量的學習型源碼下載站。</p>		</li>		<li><img src="http://www.aspku.com/jscss/demoimg/201011/u160412.jpg" alt="" />			<p>今天天氣不錯，我們都出來郊游了，可不一會就下起了雨，都淋濕了，但心情很爽噢。<br/>必竟我們不怎么出來玩，一出來就碰到了雨，很榮幸哦！</p>		</li>	</ul></div><script type="text/javascript">new slider({id:'slider'})</script></body></html>

上一篇：利用cookie技術讓DIV提示框只顯示一次的代碼

下一篇：自寫一個簡單點的網頁軟鍵盤