suchen

Heim >Web-Frontend >js-Tutorial >js-Implementierung einfacher linker und rechter fester Werbeeffekte. Beispiele_Javascript-Kenntnisse

js-Implementierung einfacher linker und rechter fester Werbeeffekte. Beispiele_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 16:05:011336Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man mit js einen einfachen festen Werbeeffekt auf der linken und rechten Seite erzielt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Die meisten Websites haben feste Werbeflächen auf der linken und rechten Seite. Im Folgenden finden Sie den einfachsten Code, um diesen Effekt zu erzielen. Beim Scrollen kann es zu leichten Störungen kommen. Dieses Problem wird später gelöst.

Punkt 1: 

var adtop = adleft.offsetTop;

Ermitteln Sie die Position des Elements von oben, die beim Scrollen benötigt wird.

Punkt 2:

Code kopieren Der Code lautet wie folgt:
adleft.style.top=adtop (document .documentElement. scrollTop ||. document.body.scrollTop) "px";
Beim Scrollen ist der der oberen Position des Elements zugewiesene Wert der Abstand zwischen dem Element selbst und der Oberseite plus dem Scrollabstand.

Obiger Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#adleft,#adright{
width:30px;
height:100px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
#adleft{left:0; top:150px; }
#adright{right:0; top:150px;}
</style>
<script>
window.onload = function(){
 var adleft = document.getElementById("adleft");
 var adright = document.getElementById("adright");
 var adtop = adleft.offsetTop;
 window.onscroll = function(){
  adleft.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; 
  adright.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; 
 }
} 
</script>
</head>
<body style="height:2000px;">
<h1>左右广告</h1>
<div id="adleft">左边广告</div>
<div id="adright">右边广告</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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：js-Methode, um einen allmählichen Anzeigeeffekt zu erzielen, der den Fähigkeiten von Sina Weibo homepage_javascript ähneltNächster Artikel：js-Methode, um einen allmählichen Anzeigeeffekt zu erzielen, der den Fähigkeiten von Sina Weibo homepage_javascript ähnelt

In Verbindung stehende Artikel

Mehr sehen