js實現從右向左緩緩浮出網頁浮動層廣告的方法

2024-05-06 16:19:45

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了js實現從右向左緩緩浮出網頁浮動層廣告的方法,可實現右側浮動廣告的定時彈出及點擊展開、折疊等功能,非常具有實用價值,需要的朋友可以參考下

本文實例講述了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 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>