Heim > Artikel > Web-Frontend > js-Methode zum langsamen Popup von Floating-Layer-Werbung auf Webseiten von rechts nach links_Javascript-Kenntnisse

js-Methode zum langsamen Popup von Floating-Layer-Werbung auf Webseiten von rechts nach links_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 16:00:061290Durchsuche

Das Beispiel in diesem Artikel beschreibt die js-Methode zum langsamen Auftauchen einer Floating-Layer-Werbung auf einer Webseite von rechts nach links. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

<!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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript implementiert die automatische Änderung der Tabellenrahmenfarbe_Javascript-FähigkeitenNächster Artikel：JavaScript implementiert die automatische Änderung der Tabellenrahmenfarbe_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen