กีฬาในจาวาสคริปต์มักใช้บนเว็บไซต์ ครั้งนี้ฉันจะแบ่งปันแอปพลิเคชั่นพื้นฐานของกีฬากับคุณ มันสะดวกสำหรับทุกคนที่จะใช้โดยตรงระหว่างการพัฒนา
รหัสนั้นง่ายและเข้าใจง่ายและเหมาะสำหรับผู้เริ่มต้น ในที่สุดฉันจะจัดเรียงกรอบกีฬาของตัวเองทีละขั้นตอน
การเรนเดอร์เคสแอปพลิเคชัน:
เลื่อนเมาส์เพื่อแชร์และ DIV ทางด้านซ้ายจะปรากฏขึ้น ลบและกู้คืนด้วยตัวเอง ฉันเชื่อว่าทุกคนจะใช้งานจริงนี้ มาดูกันว่ารหัสถูกนำไปใช้อย่างไร
การคัดลอกรหัสมีดังนี้:
<style type = "text/css">
#div1 {
ความกว้าง: 150px;
ความสูง: 200px;
ความเป็นมา: สีเขียว;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: -150px;
-
#div1 span {
ตำแหน่ง: สัมบูรณ์;
ความกว้าง: 20px;
ความสูง: 60px;
ความสูงของสาย: 20px;
ความเป็นมา: สีน้ำเงิน;
ขวา: -20px;
ด้านบน: 70px;
-
</style>
การคัดลอกรหัสมีดังนี้:
<body>
<div id = "div1">
<span>
ร่วมกัน
</span>
</div>
</body>
ต่อไปนี้เป็นรหัส JavaScript
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
window.onload = function () {
var odiv = document.getElementById ("div1");
odiv.onmouseover = function () {
startmove (0);
-
odiv.onmouseout = function () {
startmove (-150);
-
-
var time = null;
ฟังก์ชั่น startmove (itraget) {
var odiv = document.getElementById ("div1");
ClearInterval (เวลา);
time = setInterval (ฟังก์ชัน () {
var speed = 0;
if (odiv.offsetleft> itraget) {
ความเร็ว = -10;
}อื่น{
ความเร็ว = 10;
-
if (odiv.offsetleft == itraget) {
ClearInterval (เวลา);
}อื่น{
odiv.style.left = odiv.offsetleft+ความเร็ว+'px';
-
}, 30);
-
</script>
แนวคิด:
ซ้ายเริ่มต้นในสไตล์คือ -150 div จะหดตัวภายในและจะปรากฏขึ้นหากได้รับ 0 จากนั้นเราเพียงแค่ต้องเปลี่ยนค่านี้
พารามิเตอร์ iTarget ใน StartMove คือจุดเป้าหมายซึ่งระบุจุดเป้าหมายที่คุณจะหยุด
การควบคุมขนาดของความเร็วสามารถควบคุมความเร็วของการเคลื่อนไหว หากถึงจุดเป้าหมายให้หยุดจับเวลา
กฎ:
* สมมติฐาน
* ซ้าย: 30 itarget: 300 ได้รับเป็นบวกทางด้านขวา
* ซ้าย: 600 itarget: 50 มันเป็นลบไปทางซ้าย
-
* ความสัมพันธ์ระหว่างตำแหน่งปัจจุบันที่เหลือและจุดเป้าหมาย itarget จะทำให้ความเร็วบวกและค่าลบติดตั้ง
หมายเหตุ: ตัวจับเวลาจะต้องปิดทันทีที่คุณเริ่มต้นเพราะทุกครั้งที่คุณย้ายไปแบ่งปันตัวจับเวลาจะเปิดอยู่ ยิ่งคุณเปิดไฟมากเท่าไหร่ความเร็วก็จะเร็วขึ้นเพราะจะมีตัวจับเวลาหลายตัวที่จะดำเนินการในเวลาเดียวกัน
ดังนั้นทุกครั้งที่คุณต้องตรวจสอบให้แน่ใจว่าตัวจับเวลาหนึ่งใช้งานได้
ติดตาม: ฟังก์ชั่นฟังก์ชั่นเดียวกันพารามิเตอร์ที่น้อยลงยิ่งดีดังนั้นตามกฎข้างต้นความเร็วจะไม่ผ่านเป็นพารามิเตอร์
เพื่อยกตัวอย่างในชีวิต: โดยทั่วไปแล้วเป็นไปไม่ได้ที่จะนั่งแท็กซี่และบอกคนขับรถแท็กซี่ว่าเขามี 100 หลาไปทุกที่ที่เขาไปถึง คุณไม่สามารถบอกอาจารย์ได้ว่าคุณต้องการวิ่งเร็วแค่ไหน
ดังนั้นโปรแกรมจึงเหมือนกันดังนั้นพารามิเตอร์ความเร็วจะถูกลบที่นี่
แน่นอนว่าจะมีปัญหามากมายเกี่ยวกับกรอบกีฬาในปัจจุบันซึ่งจะได้รับการแก้ไขหลังจากนั้นอีกในอนาคต ในบทความถัดไปให้หารือเกี่ยวกับวิธีหยุดการเคลื่อนไหวที่เหมือนกัน