Maison > Article > interface Web > 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

WBOYoriginal: 2016-05-16 15:33:311235parcourir

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>

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

Déclaration：

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

Article précédent：Cinq façons de supprimer les doublons des compétences JavaScript arrays_javascriptArticle suivant：Cinq façons de supprimer les doublons des compétences JavaScript arrays_javascript

Articles Liés

Voir plus