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

2019-11-21 00:09:54

字體：大中小

來源：轉載

供稿：網友

<!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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：Js+CSS實現的間斷和不間斷文本滾動代碼

下一篇：仿Discuz!的論壇評分發帖彈出提示并漸漸消失的效果