快捷導(dǎo)航

JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法

更新時(shí)間：2015年02月23日 10:45:50 作者：代碼家園

這篇文章主要介紹了JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法,實(shí)例分析了javascript彈出特效的css與提示框的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)仿中關(guān)村論壇評(píng)分后彈出提示效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

復(fù)制代碼代碼如下:

<!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仿中關(guān)村論壇評(píng)分后彈出提示的效果</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="謝謝參與！經(jīng)驗(yàn)+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>