ความคิด:
1. รับระยะห่างของวัตถุจากด้านบนและด้านซ้าย
2. รับวัตถุองค์ประกอบ
3. รับระยะการเลื่อนของแถบเลื่อนเมื่อแถบเลื่อนเลื่อน
4. ฟังก์ชั่นจะดำเนินการเมื่อมีการเลื่อนแถบเลื่อน: ระยะห่างของวัตถุจากด้านบน/ซ้ายจะกลายเป็นระยะห่างเดิมจากด้านบน/ซ้าย + จำนวนพิกเซลที่เลื่อนโดยแถบเลื่อน
รหัส html:
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title></title>
</หัว>
<ร่างกาย>
<div id="ซ้าย">
<img src="images/z1.jpg" alt=""/>
</div>
<div id="ขวา">
<img src="images/z2.jpg" alt=""/>
</div>
</ร่างกาย>
</html> รหัส css:
*{
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
-
ร่างกาย{
ความกว้าง: 2000px;
ความสูง: 2000px;
-
.ซ้าย{
ตำแหน่ง: แน่นอน;
ความกว้าง: 110px;
ความสูง: 110px;
ด้านบน: 100px;
ซ้าย: 50px;
-
.ขวา{
ตำแหน่ง: แน่นอน;
ความกว้าง: 110px;
ความสูง: 110px;
ด้านบน: 100px;
ซ้าย: 1360px;
} รหัส js:
var leftT;//ระยะห่างระหว่าง p ด้านซ้ายและด้านบน var leftL;//ระยะห่างระหว่างด้านซ้าย p และด้านซ้าย var rightT;//ระยะห่างระหว่าง p ด้านขวาและด้านบน var rightL;/ /ระยะห่างระหว่าง p ด้านขวาและด้านซ้าย var objLeft;//วัตถุเอกสาร P ทางด้านซ้าย var objRight;//วัตถุเอกสาร P บนฟังก์ชันด้านขวา place(){
objLeft=document.getElementById("ซ้าย");
objRight=document.getElementById("ขวา");
leftT=document.defaultView.getComputedStyle(objLeft,null).top;
leftL=document.defaultView.getComputedStyle(objLeft,null).left;
rightT=document.defaultView.getComputedStyle(objRight,null).top;
rightL=document.defaultView.getComputedStyle(objRight,null).left;
-
//รับจำนวนพิกเซลที่เลื่อนโดยฟังก์ชันแถบเลื่อน move(){
var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;
//ตั้งค่าพิกเซลจากด้านซ้าย p ไปด้านบน objLeft.style.top=parseInt(leftT)+scrollT+"px";
objLeft.style.left=parseInt(ซ้ายL)+scrollL+ "px";
objRight.style.top=parseInt(rightT)+scrollT+"px";
objRight.style.left=parseInt(rightL)+scrollL+ "px";
-
window.onload=สถานที่;
window.onscroll=move; คำแนะนำที่เกี่ยวข้อง: [วิดีโอสอน JavaScript]
ด้านบนคือการใช้ js เพื่อแก้ไขภาพที่ตำแหน่งใดตำแหน่งหนึ่งบนหน้าจอ! สำหรับรายละเอียดเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ php Chinese!
