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

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

<!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>JS仿中关村论坛评分后弹出提示的效果</title> 
</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> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.

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

原文链接：http://www.chengxuyuans.com/javascript/91935.html