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:
<!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.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
