Ide:
1. Hitung jarak benda dari sisi atas dan kiri;
2. Dapatkan objek elemen;
3. Dapatkan jarak pengguliran bilah gulir saat bilah gulir bergulir;
4. Fungsi dijalankan saat bilah gulir bergulir: jarak objek dari atas/kiri menjadi jarak asli dari atas/kiri + jumlah piksel yang digulir oleh bilah gulir.
kode html:
<!DOCTYPE html>
<html>
<kepala>
<meta charset="UTF-8">
<judul></judul>
</kepala>
<tubuh>
<div id="kiri">
<img src="gambar/z1.jpg" alt=""/>
</div>
<div id="kanan">
<img src="gambar/z2.jpg" alt=""/>
</div>
</tubuh>
</html> kode css:
*{
margin: 0;
bantalan: 0;
}
tubuh{
lebar: 2000 piksel;
tinggi: 2000 piksel;
}
.kiri{
posisi: mutlak;
lebar: 110 piksel;
tinggi: 110 piksel;
atas: 100 piksel;
kiri: 50 piksel;
}
.Kanan{
posisi: mutlak;
lebar: 110 piksel;
tinggi: 110 piksel;
atas: 100 piksel;
kiri: 1360 piksel;
} kode js:
var leftT;//Jarak antara p kiri dan var kiri atasL;//Jarak antara p kiri dan var kiri kananT;//Jarak antara p kanan dan var kanan atasL;/ /Jarak antara p kanan dan kiri var objLeft;//P objek dokumen di kiri var objRight;//P objek dokumen di kanan fungsi place(){
objLeft=document.getElementById("kiri");
objRight=document.getElementById("kanan");
leftT=document.defaultView.getComputedStyle(objLeft,null).top;
leftL=document.defaultView.getComputedStyle(objLeft,null).kiri;
rightT=document.defaultView.getComputedStyle(objRight,null).top;
rightL=document.defaultView.getComputedStyle(objRight,null).kiri;
}
//Dapatkan jumlah piksel yang di-scroll dengan fungsi scroll bar move(){
var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;
//Atur piksel dari p kiri ke atas objLeft.style.top=parseInt(leftT)+scrollT+"px";
objLeft.style.left=parseInt(leftL)+scrollL+"px";
objRight.style.top=parseInt(kananT)+scrollT+"px";
objRight.style.left=parseInt(kananL)+scrollL+"px";
}
window.onload=tempat;
window.onscroll=move; Rekomendasi terkait: [tutorial video JavaScript]
Cara di atas adalah menggunakan js untuk memperbaiki gambar pada posisi tertentu di layar! Untuk lebih jelasnya silahkan perhatikan artikel terkait lainnya di website php Cina!
