新浪微博首页“大家正在说”文字滚动代码

发布时间：2018-08-20 04:24 所属栏目：121 来源：站长网

导读：新浪微博首页大家正在说文字滚动代码，有朋友喜欢，于是就把代码扣下来，供大家学习。有淡入淡出的效果，新内容渐渐滚出来，旧内容慢慢滚动下去，貌似很新奇的一种方式。代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http:

　　新浪微博首页“大家正在说”文字滚动代码，有朋友喜欢，于是就把代码扣下来，供大家学习。

　　有淡入淡出的效果，新内容渐渐滚出来，旧内容慢慢滚动下去，貌似很新奇的一种方式。

　　代码如下：

<!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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）