仿Discuz!论坛动态弹出提示并渐渐消失代码

发布时间：2018-08-21 16:46:14 所属栏目：Unix 来源：站长网

导读：仿Discuz!论坛弹出提示并渐渐消失的效果，Discuz!自7.0开始加入了这一效果，很多站长朋友都知道，但是DZ的JS代码比较庞大，很多朋友不知道如何截取其中的使用代码，从而降低了WEB网站体验，现在将这一功能实现了，大家学习和借鉴一下吧。 PS：与DZ的效果大

　　仿Discuz!论坛弹出提示并渐渐消失的效果，Discuz!自7.0开始加入了这一效果，很多站长朋友都知道，但是DZ的JS代码比较庞大，很多朋友不知道如何截取其中的使用代码，从而降低了WEB网站体验，现在将这一功能实现了，大家学习和借鉴一下吧。

　　PS：与DZ的效果大体相同，只是界面不是太美观，功能已实现，大家自己美化吧。

　　特效代码：

<!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>Discuz!弹出提示的效果</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(); } //烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ 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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：我爱故事小小网_铜陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!