JavaScript implementiert Scroll- und Floating-Anzeigencode mit Puffereffekt auf die screen_javascript-Fähigkeiten-js-Tutorial-php.cn

JavaScript implementiert Scroll- und Floating-Anzeigencode mit Puffereffekt auf die screen_javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:33:31

Original

1195 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie JavaScript scrollenden und schwebenden Anzeigencode mit einem Puffereffekt auf dem Bildschirm implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration von JavaScript-Code, der immer mit dem Bildschirm scrollt. Insbesondere einige Webmaster, die Floating-Anzeigen mögen, verwenden diesen Code tatsächlich als Floating-Anzeige ein Menü, das mit dem Bildschirm scrollt, sodass Besucher jederzeit und überall die Navigation auf der Website steuern können.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

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

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.