Maison > Article > interface Web > Résumé des exemples d'implémentation de code publicitaire flottant en JavaScript
Résumé des exemples d'implémentation de code publicitaire flottant en JavaScript
- 黄舟original
- 2017-12-04 13:51:547961parcourir
Lorsque nous ouvrons une page Web, nous constaterons que quelle que soit la page Web dont il s'agit, il y aura beaucoup de publicités flottantes. Beaucoup de gens se demanderont comment cet effet est obtenu ? Aujourd'hui, nous allons vous donner une introduction détaillée à la mise en œuvre de JavaScript pour implémenter du code publicitaire flottant !
Le premier type de publicité flottante n'est pas conforme au W3C
Le code de publicité flottante JavaScript est très bon et le code est rationalisé, mais une seule publicité flottante peut être utilisée à la fois temps. J'espère que mes amis webmasters l'apprécieront.
<html>
<head>
<title>漂浮广告</title>
<body>
<div id="codefans_net" style="position:absolute">
<!--链接地址--><a href="#" target="_blank">
<!--图片地址--><img src="/images/logo.gif" border="0">
</a>
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("codefans_net")
function float() {
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("float()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("float()", delay)}
</script>
</body>
</html>Le deuxième type d'annonce flottante ne répond pas aux normes
Le code d'annonce flottante Js, une annonce flottante plus classique, est encore très pratique aujourd'hui, si vous êtes un webmaster Si oui, ce code est nécessaire et j'espère qu'il vous sera utile.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>漂浮广告</title>
</head>
<body>
<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
visibility: visible;"><a href="http://sc.jb51.net" target="_blank"><img src="/images/logo.gif" width="80" height="80" border="0"></a></DIV>
<SCRIPT>
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + document.body.scrollLeft;
img1.style.top = yPos + document.body.scrollTop;
if (yon)
{yPos = yPos + step;}
else
{yPos = yPos - step;}
if (yPos < 0)
{yon = 1;yPos = 0;}
if (yPos >= (height - Hoffset))
{yon = 0;yPos = (height - Hoffset);}
if (xon)
{xPos = xPos + step;}
else
{xPos = xPos - step;}
if (xPos < 0)
{xon = 1;xPos = 0;}
if (xPos >= (width - Woffset))
{xon = 0;xPos = (width - Woffset); }
}
function start()
{
img1.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
</SCRIPT>
</body>
</html>Les deux ci-dessus ne prennent pas en charge les déclarations standards
Le troisième code d'annonce flottant conforme au W3C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>符合W3C的漂浮广告代码-脚本之家</title>
</head>
<body>
<script>
document.write ("<DIV id=img1 style='Z-INDEX: 100; LEFT: 2px; WIDTH: 252px; POSITION: absolute; TOP: 43px; HEIGHT: 172px; ")
document.write (" visibility: visible;'> ")
document.write (" <a href='http://s.jb51.net' target='_blank'> ")
document.write (" <img src='/upload/201204/20120411210123566.gif'style=border:none;/> ")
document.write (" </a></DIV> ")
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 8;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + document.documentElement.scrollLeft;
img1.style.top = yPos + document.documentElement.scrollTop;
if (yon)
{yPos = yPos + step;}
else
{yPos = yPos - step;}
if (yPos < 0)
{yon = 1;yPos = 0;}
if (yPos >= (height - Hoffset))
{yon = 0;yPos = (height - Hoffset);}
if (xon)
{xPos = xPos + step;}
else
{xPos = xPos - step;}
if (xPos < 0)
{xon = 1;xPos = 0;}
if (xPos >= (width - Woffset))
{xon = 0;xPos = (width - Woffset); }
}
function start()
{
img1.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
</script>
</body>
</html>Résumé :
Cet article présente plusieurs façons de mettre en œuvre des publicités flottantes en JavaScript. Chaque méthode est utilisée différemment. Les amis peuvent choisir celle qui leur convient en fonction de leurs propres besoins. votre travail!
Recommandations associées :
Annonce flottante centrée sur js
Annonces de couplet js, classe d'emballage publicitaire flottant
Exemples spécifiques de code d'annonce flottant aléatoire JS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript