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

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

1383 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.