js实现从右向左缓缓浮出网页浮动层广告的方法

摘要：本文实例讲述了js实现从右向左缓缓浮出网页浮动层广告的方法。分享给大家供大家参考。具体实现方法如下：从右向左缓缓浮出的网页浮动层广告var$...

本文实例讲述了js实现从右向左缓缓浮出网页浮动层广告的方法。分享给大家供大家参考。具体实现方法如下：

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>从右向左缓缓浮出的网页浮动层广告</title> <script language="javascript"> var $ = function (d){return document.getElementById(d)}; var CLS={ create: function() { return function() { 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)); else this.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:new Array() }; 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(){new CLS.Marquee("tit","abc",10)},3000); //tit是点击按钮的Id ，abc是浮动块的ID,10是显示时长 }; </script> <style type="text/css">  </style> </head> <body> <> <div id="kong"> <> <div id="abc"> <div id="tit">-</div> <div> <a href="/">网页上从右边缓缓弹出的广告框效果</a></div> </div> </div> 右侧广告3秒后弹出 </body> </html>

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