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

时间：2021-05-26

本文实例讲述了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"><!--#abc {border: 1px solid #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><body style="margin:0px;"><!--浮动框外面套一层，防止出现横向滚动条--><div id="kong"><!--浮动框--><div id="abc"><div id="tit">-</div><div class="right"><a href="/">网页上从右边缓缓弹出的广告框效果</a></div></div></div>右侧广告3秒后弹出</body></html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章