仿新浪微博首頁(yè)"大家正在說(shuō)"漸入輪顯效果

更新時(shí)間：2010年10月31日 21:50:24 作者：

仿新浪微博首頁(yè)“大家正在說(shuō)”漸入輪顯效果，有淡入淡出的效果，新內(nèi)容漸漸滾出來(lái)，老內(nèi)容慢慢滾動(dòng)下去，貌似很新奇的一種方式，從新浪微博獲得。

<!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>仿新浪微博首頁(yè)"大家正在說(shuō)"漸入輪顯效果</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>是不是有點(diǎn)全都，吃早餐竟然食物中毒??？</p> <p>2分鐘前</p> </li> <li> <h4>2、30城市房?jī)r(jià)增高進(jìn)7成</h4> <p>房奴注定當(dāng)今社會(huì)的年青人會(huì)很忙碌，一輩子會(huì)房子奔波……</p> <p>2分鐘前</p> </li> <li> <h4>3、李瑋峰進(jìn)球了</h4> <p>李瑋峰進(jìn)球了，這是真的嗎？</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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]