您的位置：首页 > Web前端 > JavaScript

仿Discuz!论坛评分发帖弹出提示并渐渐消失的效果

2014-09-22 11:19 435 查看

仿Discuz!论坛评分发帖弹出提示并渐渐消失的效果，相信不少朋友都见到过这效果吧，一般在应用Discuz搭建论坛的网站中，当我们发一个帖子后，就会有一个渐渐出来又渐渐消失的提示，告诉我们发帖子得了多少分，本特效实现的就是这种效果。

<!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>仿中关村论坛评分后弹出提示的效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

</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.backgroundImage="";
this.div.style.position="absolute";
this.div.style.left="50%";

this.div.style.marginLeft="-50px"
this.div.style.marginTop="-20px"
this.div.innerText="点击广告！积分+2"
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： discuz js

相关文章推荐

新的分享

章节导航