cari

Rumah >hujung hadapan web >tutorial js >js pelaksanaan kesan pengiklanan tetap kiri dan kanan yang mudah examples_javascript kemahiran

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

WBOY
WBOYasal
2016-05-16 16:05:011337semak imbas

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;

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>

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js untuk mencapai kesan paparan beransur-ansur serupa dengan kemahiran Sina Weibo homepage_javascriptArtikel seterusnya：js untuk mencapai kesan paparan beransur-ansur serupa dengan kemahiran Sina Weibo homepage_javascript

Artikel berkaitan

Lihat lagi