一般在应用discuz搭建论坛的网站中,当我们发一个帖子后,就会有一个渐渐出来又渐渐消失的提示,告诉我们发帖子得了多少分,本特效实现的就是这种效果。
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);
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]