js实现从右向左缓缓浮出网页浮动层广告的方法
本文实例讲述了js实现从右向左缓缓浮出网页浮动层广告的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>从右向左缓缓浮出的网页浮动层广告</title>
<scriptlanguage="javascript">
var$=function(d){returndocument.getElementById(d)};
varCLS={
create:function(){
returnfunction(){
this.$ADD=function(fn){CLS.add(this,fn)};
this.init.apply(this,arguments);
}
},
add:function(obj,fn){
fn.apply(obj,arguments);
},
enterFrame:function(){
this.onEnterFrame=function(){};
this.$PLAY=function(g){
this.enterFrameP=this.enterFrameP||10;
this.CLStimeIndex=CLS.ontimes.length;
CLS.ontimes.push(this);
window.clearTimeout(this.enterFrameTimeout);
window.clearInterval(this.enterFrameInterval);
if(g)this.enterFrameTimeout=window.setTimeout('CLS.ontimes['+this.CLStimeIndex+'].enterFrameInterval=window.setInterval("CLS.ontimes['+this.CLStimeIndex+'].onEnterFrame()",'+this.enterFrameP+')',parseInt(g*1000));
elsethis.enterFrameInterval=window.setInterval("CLS.ontimes["+this.CLStimeIndex+"].onEnterFrame()",this.enterFrameP);
}
this.$STOP=function(){
window.clearInterval(this.enterFrameInterval);
}
this.$SET=function(p){
this.enterFrameP=p;
}
},
ontimes:newArray()
};
CLS.Marquee=CLS.create();
CLS.Marquee.prototype={
init:function(button,box,speed){
this.box=$(box);
this.tit=$(button)
this.kong=$("kong");
this.onOpen=true;
this.show=false;
this.time=0;
this.speed=speed;
this.kong.style.height=this.box.offsetHeight+"px";
this.Maxw=this.box.offsetWidth-this.tit.offsetWidth;
this.box.style.right=-this.box.offsetWidth+"px";
this.boxTop=this.kong.offsetTop;
var_t=this;
this.tit.onclick=function(){
this.show=true;
if(_t.onOpen){
_t.onEnterFrame=_t.close;
_t.onOpen=false;
}else{
_t.onEnterFrame=_t.open;
_t.onOpen=true;
}
_t.$PLAY();
};
this.$ADD(CLS.enterFrame);
this.onEnterFrame=this.open;
this.$PLAY();
},
open:function(){
this.tit.innerHTML="-";
var_r=parseInt(this.box.style.right);
var_b=(0-_r)/30;
this.box.style.right=(_r+_b)+"px";
this.kong.style.top=(document.documentElement.scrollTop+this.boxTop)+"px";
if(_b==0&&!this.show){
this.time+=10;
if(this.time>=this.speed*1000){
this.show=true;
this.onOpen=false;
this.$STOP();
this.onEnterFrame=this.close;
this.$PLAY();
}
}
},
close:function(){
this.tit.innerHTML="+";
var_r=parseInt(this.box.style.right);
var_b=(-this.Maxw-_r)/5;
this.box.style.right=Math.round(_r+_b)+"px";
this.kong.style.top=(document.documentElement.scrollTop+this.boxTop)+"px";
}
};
window.onload=function(){
setTimeout(function(){newCLS.Marquee("tit","abc",10)},3000);
//tit是点击按钮的Id，abc是浮动块的ID,10是显示时长
};
</script>
<styletype="text/css">
<!--
#abc{
border:1pxsolid#003399;
position:absolute;
height:150px;
width:220px;
right:-100%;
}
#abc#tit{
background-color:#0066FF;
position:relative;
height:100%;
width:20px;
color:#FFFFFF;
text-align:center;
float:left;
}
#kong{
position:absolute;
width:100%;
top:100px;
overflow:hidden;
top:100px;
right:0px;
}
.right{
float:right;
width:190px;
padding:5px;
}
-->
</style>
</head>
<bodystyle="margin:0px;">
<!--浮动框外面套一层，防止出现横向滚动条-->
<divid="kong">
<!--浮动框-->
<divid="abc">
<divid="tit">-</div>
<divclass="right">
<ahref="/">网页上从右边缓缓弹出的广告框效果</a></div>
</div>
</div>
右侧广告3秒后弹出
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。