บทความนี้อธิบายถึงผลกระทบของ JS ที่เลียนแบบปุ่มเปิดหน้ารูปภาพของสถานีรูปภาพ Tencent แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
ภาพหน้าจอของเอฟเฟกต์การทำงานมีดังนี้:
รหัสเฉพาะมีดังนี้:
<! doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> Tencent Picture Flip </title> <style type = "text/css"> *{margin: none; Padding: ไม่มี; } ร่างกาย {พื้นหลัง:#000000; } #tip {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 564px; ความสูง: 362px; ด้านบน: -362px; ความเป็นมา: url (../ img/tencentimg/tiplayer.png); } #left {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 101px; ความสูง: 95px; ความเป็นมา: url (../ img/tencentimg/left.png); ชายแดน: 1px Solid #F2F2F2; แสดง: ไม่มี; เคอร์เซอร์: มือ; } #right {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 101px; ความสูง: 95px; ความเป็นมา: url (../ img/tencentimg/right.png); ชายแดน: 1px Solid #F2F2F2; แสดง: ไม่มี; เคอร์เซอร์: มือ; } #MousexPosition {Width: 30px; ความสูง: 20px; สี: #ffffff; แสดง: อินไลน์; } #MouseSposition {width: 30px; ความสูง: 20px; สี: #ffffff; แสดง: อินไลน์; } #DivTop {WIDTH: 30PX; ความสูง: 20px; สี: #ffffff; แสดง: อินไลน์; } </style> <script type = "text/javascript"> function init () {var ml = document.body.clientWidth/2 - 40; document.getElementById ("ซ้าย"). style.pixeltop = 300; document.getElementById ("ขวา"). style.pixeltop = 300; document.getElementById ("ซ้าย"). style.pixelleft = ml - 101*4; document.getElementById ("ขวา"). style.pixelleft = ml + 101*4; var tip = document.getElementById ("เคล็ดลับ"); var inith = (document.body.clientwidth - tip.offsetWidth)/2; document.getElementById ("เคล็ดลับ"). style.left = inith; document.getElementById ("เคล็ดลับ"). style.pixeltop = -362; } ฟังก์ชั่น mouseposition (ev) {if (ev.pagex || ev.pagey) {return {x: ev.pagex, y: ev.pagey}; } return {x: ev.clientx + document.body.scrollleft - document.body.clientleft, y: ev.clienty + document.body.scrolltop - document.body.clienttop}; } document.onmousemove = mousemove; ฟังก์ชั่น mousemove (e) {e = e || window.event; var mousepos = mouseposition (e); var mid = document.body.clientwidth/2; document.getElementById ('mousexposition'). innerhtml = mousepos.x; document.getElementById ('mouseyposition'). innerhtml = mousepos.y; if (mousepos.x <mid) {document.getElementById ("ซ้าย"). style.display = "block"; document.getElementById ("ขวา"). style.display = "ไม่มี"; } อื่นถ้า (mousepos.x> mid) {document.getElementById ("ขวา"). style.display = "block"; document.getElementById ("ซ้าย"). style.display = "ไม่มี"; }} function show () {if (document.getElementById ("tip"). style.pixeltop <80) {document.getElementById ("เคล็ดลับ"). style.pixeltop += 20; document.getElementById ("divtop"). innerhtml = document.getElementById ("tip"). style.pixeltop; settimeout ("show ()", 10)}} ฟังก์ชั่นซ่อน () {ถ้า (document.getElementById ("tip"). style.pixeltop> -362) {document.getElementById ("ปลาย"). pixeltop -= 20; document.getElementById ("divtop"). innerhtml = document.getElementById ("tip"). style.pixeltop; settimeout ("hide ()", 10)}} </script> </head> <body onload = "init ()"> <div id = "left" onclick = "hide ()"> </div> <div id = "ขวา" onClick = ") id = "mousexposition"> 0 </div> <br/> <span style = "สี: #ffffff"> แกนเมาส์ y: </span> <div id = "mouseyposition"> 0 </div> <br/> <span style = "color: #ffffff; "เคล็ดลับ"> 0 </div> </body> </html>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน