บทความนี้อธิบายถึงกรอบพื้นฐานของการเคลื่อนไหว JS แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
หมายเหตุที่นี่:
1. ปิดตัวจับเวลาที่มีอยู่เมื่อเริ่มการเคลื่อนไหว
2. การเคลื่อนไหวแยกจากหยุด
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> </title>
<style type = "text/css">
#div1 {
ความกว้าง: 200px;
ความสูง: 200px;
ความเป็นมา: สีแดง;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0;
ด้านบน: 60px;
-
</style>
<script type = "text/javascript">
window.onload = function () {
var odiv = document.getElementById ("div1");
var obt = document.getElementsByTagname ('อินพุต') [0];
var time = null;
obt.onclick = function () {
ClearInterval (เวลา); // ตัวจับเวลาแรกจะถูกปิดที่นี่เพราะนี่คือการแก้ปัญหาข้อผิดพลาดที่มีการคลิกปุ่มหลายปุ่มในระหว่างการเคลื่อนไหวส่งผลให้ตัวจับเวลาหลายตัวซ้อนทับ
time = setInterval (ฟังก์ชัน () {
var speed = 7;
if (odiv.offsetleft <= 600)
odiv.style.left = odiv.offsetleft+ความเร็ว+'px';
อื่น{
ClearInterval (เวลา);
-
}, 30);
-
-
</script>
</head>
<body>
<อินพุต type = "ปุ่ม" value = "เริ่มการเคลื่อนไหว" />
<div id = "div1"> </div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน