仿新浪微博首页“大家正在说”渐入轮显效果

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首页特效的动感导航菜单

下一篇：实用的多级树形展开菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注