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

2019-11-21 00:09:54

字體：大中小

來源：轉載

供稿：網友

一般在應用Discuz搭建論壇的網站中，當我們發一個帖子后，就會有一個漸漸出來又漸漸消失的提示，告訴我們發帖子得了多少分，本特效實現的就是這種效果。

<!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"> </head> <body> <script language="javascript"> var x=window.x||{}; x.creat=function(t,b,c,d){ this.t=t; this.b=b; this.c=c; this.d=d; this.op=1; this.div=document.createElement("div"); this.div.style.height="40px"; this.div.style.width="100px"; this.div.style.background="red"; this.div.style.position="absolute"; this.div.style.left="50%"; this.div.style.marginLeft="-50px" this.div.style.marginTop="-20px" this.div.innerText="謝謝參與！經驗+5" this.div.style.fontSize="12" this.div.style.lineHeight=this.div.style.height this.div.style.textAlign="center"; this.div.style.fontWeight="bold"; //this.div.style.border="solid red 1px"; this.div.style.color="#fff" this.div.style.top=(this.b+"%"); document.body.appendChild(this.div); this.run(); } x.creat.prototype={ run:function(){ var me=this; this.div.style.top=-this.c*(this.t/this.d)*(this.t/this.d)+this.b+"%"; this.t++; this.q=setTimeout(function(){me.run()},25) if(this.t==this.d){ clearTimeout(me.q); setTimeout(function(){me.alpha();},1000); } }, alpha:function(){ var me=this; if("/v"=="v"){ this.div.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+this.op*100+")"; this.div.style.filter="alpha(opacity="+this.op*100+")"; ;} else{this.div.style.opacity=this.op} this.op-=0.02; this.w=setTimeout(function(){me.alpha()},25) if(this.op<=0){ clearTimeout(this.w); document.body.removeChild(me.div); } } } new x.creat(1,50,25,30); </script> </body> </html>

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

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

下一篇：實用的多級樹形展開菜單效果代碼