js pelaksanaan kesan pengiklanan tetap kiri dan kanan yang mudah examples

js pelaksanaan kesan pengiklanan tetap kiri dan kanan yang mudah examples_javascript kemahiran

WBOY

Lepaskan： 2016-05-16 16:05:01

asal

1287 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara untuk mencapai kesan pengiklanan tetap yang mudah di sebelah kiri dan kanan menggunakan js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Kebanyakan tapak web mempunyai ruang pengiklanan tetap di sebelah kiri dan kanan Berikut adalah kod yang paling mudah untuk mencapai kesan ini.

Mata 1:

var adtop = adleft.offsetTop;

Salin selepas log masuk

Dapatkan kedudukan elemen dari atas, yang diperlukan semasa menatal.

Mata 2:

Salin kod Kod adalah seperti berikut:

adleft.style.top=adtop (dokumen .documentElement. scrollTop ||. document.body.scrollTop) "px";

Apabila menatal, nilai yang ditetapkan pada kedudukan teratas elemen ialah jarak antara elemen itu sendiri dan bahagian atas serta jarak tatal.

Kod di atas:

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

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.