JS实现仿中关村论坛评分后弹出提示效果的方法

本文实例讲述了JS实现仿中关村论坛评分后弹出提示效果的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <title>JS仿中关村论坛评分后弹出提示的效果</title> 
5. </head> 
6. <body> 
7. <script language="javascript"> 
8. var x=window.x||{}; 
9. x.creat=function(t,b,c,d){ 
10.  this.t=t; 
11.  this.b=b; 
12.  this.c=c; 
13.  this.d=d; 
14.  this.op=1; 
15.  this.div=document.createElement("div"); 
16.  this.div.style.height="40px"; 
17.  this.div.style.width="100px"; 
18.  this.div.style.background="red"; 
19.  this.div.style.position="absolute"; 
20.  this.div.style.left="50%"; 
21.     this.div.style.marginLeft="-50px" 
22.  this.div.style.marginTop="-20px" 
23.  this.div.innerText="谢谢参与！经验+5" 
24.  this.div.style.fontSize="12" 
25.  this.div.style.lineHeight=this.div.style.height 
26.  this.div.style.textAlign="center"; 
27.  this.div.style.fontWeight="bold";  
28.  //this.div.style.border="solid red 1px";  
29.  this.div.style.color="#fff" 
30.  this.div.style.top=(this.b+"%"); 
31.  document.body.appendChild(this.div); 
32.  this.run(); 
33. } 
34. x.creat.prototype={ 
35.  run:function(){ 
36.   var me=this; 
37.   this.div.style.top=-this.c*(this.t/this.d)*(this.t/this.d)+this.b+"%"; 
38.   this.t++; 
39.   this.q=setTimeout(function(){me.run()},25) 
40.   if(this.t==this.d){ 
41.    clearTimeout(me.q); 
42.    setTimeout(function(){me.alpha();},1000); 
43.   } 
44.  }, 
45.  alpha:function(){ 
46.   var me=this; 
47.   if("\v"=="v"){ 
48.    this.div.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+this.op*100+")"; 
49.    this.div.style.filter="alpha(opacity="+this.op*100+")"; 
50.   ;} 
51.   else{this.div.style.opacity=this.op} 
52.   this.op-=0.02; 
53.   this.w=setTimeout(function(){me.alpha()},25) 
54.   if(this.op<=0){ 
55.    clearTimeout(this.w); 
56.    document.body.removeChild(me.div); 
57.   } 
58.  } 
59. } 
60. new x.creat(1,50,25,30); 
61. </script> 
62. </body> 
63. </html> 

希望本文所述对大家的javascript程序设计有所帮助。

来源：51CTO