Heim > Artikel > Web-Frontend > JavaScript implementiert Scroll- und Floating-Anzeigencode mit Puffereffekt auf die screen_javascript-Fähigkeiten

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

WBOYOriginal: 2016-05-16 15:33:311235Durchsuche

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fünf Möglichkeiten zum Entfernen von Duplikaten aus JavaScript-Arrays_Javascript-KenntnissenNächster Artikel：Fünf Möglichkeiten zum Entfernen von Duplikaten aus JavaScript-Arrays_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen