เมธอด moveBy() ของ Window ใน HTML: การย้ายตำแหน่งหน้าต่างแบบสัมพัทธ์

เมธอด moveBy() ของออบเจกต์ Window ใช้สำหรับย้ายหน้าต่างไปยังตำแหน่งใหม่โดยอิงจากตำแหน่งปัจจุบัน (Relative Position) ไม่ใช่พิกัดสัมบูรณ์

ไวยากรณ์ (Syntax)

window.moveBy(x, y)

พารามิเตอร์:

• x - จำนวนพิกเซลที่จะย้ายแนวนอน (ค่าบวก = ขวา, ค่าลบ = ซ้าย)
• y - จำนวนพิกเซลที่จะย้ายแนวตั้ง (ค่าบวก = ล่าง, ค่าลบ = บน)

ตัวอย่างการใช้งาน

ตัวอย่างนี้เปิดหน้าต่างใหม่แล้วย้ายไปทางขวา 550 พิกเซล และลง 200 พิกเซล จากตำแหน่งเดิม

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
</style>
</head>
<body>
<h1>สาธิตเมธอด moveBy() ของ Window ใน HTML</h1>
<button onclick="create()" class="btn">สร้างหน้าต่างใหม่และย้ายตำแหน่ง</button>
<script>
  function create() {
    var newWindow = window.open('', '', 'width=150,height=150');
    newWindow.moveBy(550, 200);
  }
</script>
</body>
</html>

ผลลัพธ์

คลิกปุ่ม "สร้างหน้าต่างใหม่และย้ายตำแหน่ง" เพื่อสร้างหน้าต่างใหม่และย้ายตำแหน่งโดยใช้เมธอด moveBy()

ความแตกต่างระหว่าง moveTo() และ moveBy()

หมายเหตุ

• ทำงานได้เฉพาะหน้าต่างที่สร้างด้วย window.open()
• เบราว์เซอร์สมัยใหม่อาจจำกัดการใช้งาน
• เหมาะสำหรับการสร้างเอฟเฟกต์การเคลื่อนไหวของหน้าต่าง