Maison > interface Web > js tutoriel > JavaScript implémente un code publicitaire défilant et flottant avec effet tampon sur les compétences screen_javascript

JavaScript implémente un code publicitaire défilant et flottant avec effet tampon sur les compétences screen_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-16 15:33:31
original
1380 Les gens l'ont consulté

L'exemple de cet article décrit comment JavaScript implémente le code publicitaire défilant et flottant avec un effet de mise en mémoire tampon sur l'écran. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Voici une démonstration de code JavaScript qui défile toujours avec l'écran. Il est largement utilisé en Chine, en particulier certains webmasters qui aiment les publicités flottantes utilisent souvent ce code comme publicités flottantes. En fait, l'intention initiale de cet effet est d'écrire. un menu qui défile avec l'écran afin que les visiteurs puissent contrôler la navigation du site Web à tout moment et en tout lieu.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/

Le code spécifique est le suivant :

<html>
<head>
<title>随屏滚动</title>
<style type="text/css"> 
*{padding:0;margin:0;}
html{height:100%;}
body{height:200%;}
.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
</head>
<body>
<div class="box" id="box1" style="top:0;left:0;">AD1</div>
<div class="box" id="box2" style="top:0;right:0;">AD2</div>
</body>
<script type="text/javascript"> 
var id=function(o){return document.getElementById(o)}
var scroll=function (o){
 var space=id(o).offsetTop;
 id(o).style.top=space+'px';
 void function(){
   var goTo = 0;
   var roll=setInterval(function(){
    var height =document.documentElement.scrollTop+document.body.scrollTop+space;
    var top = parseInt(id(o).style.top);
    if(height!= top){
     goTo = height-parseInt((height - top)*0.9);
     id(o).style.top=goTo+'px';
    }
    //else{if(roll) clearInterval(roll);}
   },50);
 }()
}
scroll('box1');
scroll('box2');
</script>
</html>
Copier après la connexion

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers numéros
c++ appelle javascript
Depuis 1970-01-01 08:00:00
0
0
0
Qu’est-ce que le garbage collection JavaScript ?
Depuis 1970-01-01 08:00:00
0
0
0
Que sont les fonctions de hook JavaScript ?
Depuis 1970-01-01 08:00:00
0
0
0
Comment obtenir la date actuelle en JavaScript ?
Depuis 1970-01-01 08:00:00
0
0
0
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal