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

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

创新互联公司是一家专业提供囊谦企业网站建设,专注与网站建设、网站设计、H5场景定制、小程序制作等业务。10年已为囊谦众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

 
 

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  
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);
  
  

  
  

  
  

 
 

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

当前名称：JS实现仿中关村论坛评分后弹出提示效果的方法
本文来源：http://www.shufengxianlan.com/qtweb/news37/117287.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联