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

时间：2021-08-12 09:30:26|栏目：JavaScript代码|点击：次

本文实例讲述了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>

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

上一篇：详解JavaScript中setSeconds()方法的使用

栏目：JavaScript代码

下一篇：js实现简单的点名器随机色实例代码

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

本文地址：http://www.codeinn.net/misctech/166170.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程