首页 > 网络编程 > JavaScript > 网页特效 > 布局与层 > 论坛评分

仿Discuz!的论坛评分发帖弹出提示并渐渐消失的效果

2010-10-31 21:38:08 作者：

仿Discuz!论坛评分发帖弹出提示并渐渐消失的效果，相信不少朋友都见到过这效果吧

一般在应用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需刷新才能执行]