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程序设计有所帮助。