仿新浪微博首頁“大家正在說”漸入輪顯效果

2024-09-05 12:20:44

字體：大中小

來源：轉載

供稿：網友

仿新浪微博首頁“大家正在說”漸入輪顯效果，有淡入淡出的效果，新內容漸漸滾出來，老內容慢慢滾動下去，貌似很新奇的一種方式，從新浪微博獲得。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>仿新浪微博首頁“大家正在說”漸入輪顯效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">*{margin:0;padding:0;font-size:12px;}ul{width:300px;height:400px;overflow:hidden;margin:50px 0 0 100px;}li{width:300px;border-bottom:1px solid #eee;margin-bottom:20px;}h4{border-bottom:1px solid #eee;}</style></head><body><ul>	<li>		<h4>1、吃早餐都中毒了</h4>		<p>是不是有點全都，吃早餐竟然食物中毒啊？</p>		<p>2分鐘前</p>	</li>	<li>		<h4>2、30城市房價增高進7成</h4>		<p>房奴注定當今社會的年青人會很忙碌，一輩子會房子奔波……</p>		<p>2分鐘前</p>	</li>	<li>		<h4>3、李瑋峰進球了</h4>		<p>李瑋峰進球了，這是真的嗎？</p>		<p>2分鐘前</p>	</li></ul><script language="javascript">var b=window.b||{};b.roll=function (){	var me=this;	setTimeout(function(){		me.x=document.getElementsByTagName("ul");		me.y=document.getElementsByTagName("li");		me.z=me.y.item(me.y.length-1);		me.q=me.z.clientHeight;		me.z.style.opacity=0;		me.z.style.filter="alpha:(opacity=0)";		me.z.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+0+")";		me.z.style.height="0px";		me.x[0].insertBefore(me.z,me.y[0]);		me.t=1;		me.c=0		me.i=setInterval(function(){			me.t++;			me.z.style.height=Math.round(me.q*(me.t/50)*(me.t/50))+"px";			if(me.t>=50){clearInterval(me.i);				me.d=setInterval(function(){					me.c+=0.02					if("/v"=="v"){						me.z.style.filter="alpha:(opacity="+me.c*100+")";						me.z.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+me.c*100+")";					}					me.z.style.opacity=me.c;					if(me.c>=1){clearInterval(me.d);}				},50)			}		},25)		b.roll();	},5000);}new b.roll();</script></body></html>

上一篇：仿Google首頁特效的動感導航菜單

下一篇：實用的多級樹形展開菜單