En parcourant Internet, vous constaterez qu’Internet n’est pas seulement un océan d’informations, mais aussi un océan de publicités. Outre les bannières Gif et Flash ordinaires, les publicités flottantes sont également l'une des formes de publicité les plus populaires sur Internet de nos jours. Lorsque vous faites glisser la barre de défilement du navigateur, ce type de publicité flottante sur la page peut se déplacer avec l'écran. Bien que cet effet ait une valeur pratique considérable pour l'affichage publicitaire, pour les personnes qui parcourent votre page Web, c'est quelque chose qui à la fois gêne la lecture et affecte l'intérêt de la lecture, il ne faut donc pas en abuser. Cependant, si vous l’utilisez à bon escient, il peut s’avérer extrêmement utile.
Il n'est pas difficile de créer l'effet d'une publicité flottante. Si vous avez des connaissances de base en JS, vous pouvez en écrire une vous-même. Si vous êtes trop paresseux pour écrire, téléchargez un outil d'effets spéciaux en ligne et collez le code comme indiqué. Cependant, si vous voulez vraiment comprendre comment il est fabriqué, vous devez maîtriser certaines connaissances en JS. Ici, je vais vous présenter une méthode simple de publicité flottante.
Le code suivant peut être placé entre <body></body>, au cours duquel j'ai ajouté quelques commentaires (c'est-à-dire le texte après "//" et le texte entre "<!—" et "-->").
<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
initAd();//Après avoir chargé la page, appelez la fonction initAd()
</SCRIPT>
<langage de script="JScript">
<!--
fonction initAd() {
document.all.AdLayer.style.posTop = -200;//Définissez la position de la couche publicitaire par rapport à la direction y fixe après le déclenchement de l'événement onLoad.
document.all.AdLayer.style.visibility = 'visible'//Définir le calque pour qu'il soit visible
MoveLayer('AdLayer');//Appeler la fonction MoveLayer()
}
function MoveLayer(layerName) {
var x = 600; //La couche publicitaire flottante est fixée à la position dans la direction x du navigateur
var y = 300; //La couche publicitaire flottante est fixée dans la direction y du navigateur
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
var y = document.body.scrollTop + y - diff;
eval("document.all." + layerName + ".style.posTop = y");
eval("document.all." + layerName + ".style.posLeft = x");//Couche de publicité mobile
setTimeout("MoveLayer('AdLayer');", 20);//Définir 20 millisecondes avant d'appeler la fonction MoveLayer()
}
//-->
</script>
<!--Ce qui suit est une couche avec le nom d'ID AdLayer (si le nom d'ID n'est pas AdLayer, l'AdLayer dans MoveLayer() ci-dessus doit également être modifié en conséquence), y compris une image avec un lien -->
<div id=AdLayer style='position:absolute; width:61px; height:59px;
<a href=" http://www.5dmedia.com/bbs"><img src='../qqkk2000.gif' border="0" height="60" width="60"></a>
</div>
Ici, vous pouvez définir les valeurs x et y pour définir la position du calque fixe et modifier la valeur de 20 dans setTimeout("MoveLayer('AdLayer');", 20) par la valeur que vous souhaitez appeler l'intervalle de temps MoveLayer(). Il convient également de noter que l’image utilisée est de préférence un gif avec un fond transparent afin que la couleur de fond de l’image ne masque pas le contenu qui se cache derrière.
N'oubliez pas d'utiliser les publicités flottantes avec prudence lorsque vous envisagez d'utiliser des effets spéciaux, vous devez également prendre en compte les sentiments du spectateur et ne pas en abuser !