บทความนี้อธิบายวิธีการของ JS เพื่อย้ายข้อความด้วยเมาส์ แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
นี่คือรหัสคุณสมบัติเมาส์ที่ง่ายมาก เมื่อย้ายเมาส์บนหน้าเว็บเมาส์จะถูกย้ายโดยสตริงข้อความตามเมาส์
คัดลอกรหัสดังนี้: <html>
<head>
<style type = "text/css">
.Spanstyle {
สี: 000000; ขนาดตัวอักษร: 10pt; ตำแหน่ง: สัมบูรณ์; ด้านบน: -50px; การมองเห็น: มองเห็นได้
-
</style>
<script>
var x, y
var step = 18 // นี่คือช่วงเวลาระหว่างสองอักขระที่อยู่ติดกัน
var flag = 0
ข้อความ var = "wulin.com www.vevb.com ยินดีต้อนรับสู่การเยี่ยมชมของคุณ!" // ใส่ข้อความที่คุณต้องแสดงที่นี่
message = message.split ("") // decompose สตริงเป็นอาร์เรย์
var xpos = new Array () // สร้างอาร์เรย์เพื่อบันทึก x-coordinates ของแต่ละตำแหน่ง
สำหรับ (i = 0; i <= message.length-1; i ++) {// กำหนดค่าเริ่มต้นให้กับแต่ละองค์ประกอบก่อน
xpos [i] =-50
-
var ypos = new Array () // สร้างอาร์เรย์เพื่อบันทึกพิกัด y ของแต่ละตำแหน่ง
สำหรับ (i = 0; i <= message.length-1; i ++) {
ypos [i] =-200
-
ฟังก์ชั่น MoveHandler (e) {// จัดการเหตุการณ์การเคลื่อนไหวของเมาส์
x = (document.layers)? E.pagex: document.body.scrollleft+event.clientx // กำกับตำแหน่งแนวนอนของเมาส์ตามเบราว์เซอร์
y = (document.layers)? E.Pagey: document.body.scrolltop+event.clienty // บันทึกตำแหน่งแนวตั้งของเมาส์
Flag = 1 // ตำแหน่งเมาส์มีการเปลี่ยนแปลงและจำเป็นต้องคำนวณใหม่
-
ฟังก์ชั่น makenake () {
if (flag == 1 && document.all) {// ถ้าเป็นเช่นนั้น
สำหรับ (i = message.length-1; i> = 1; i--) {// การประมวลผลพิกัดคิวคิว
xpos [i] = xpos [i-1]+step // ย้ายข้อมูลพิกัดแต่ละอันหนึ่งกริดและเพิ่มระยะห่างอักขระ
ypos [i] = ypos [I-1]
-
xpos [0] = x+step // เขียนข้อมูลใหม่ลงในหางของคิวข้อมูลพิกัด
ypos [0] = y
สำหรับ (i = 0; i <message.length-1; i ++) {
var thisspan = eval
thisspan.posleft = xpos [i]
thisspan.postop = ypos [i]
-
-
อื่นถ้า (flag == 1 && document.layers) {// ถ้าเป็น ns
สำหรับ (i = message.length-1; i> = 1; i--) {// การประมวลผลพิกัดคิวคิว
xpos [i] = xpos [i-1]+step // ย้ายข้อมูลพิกัดแต่ละอันหนึ่งกริดและเพิ่มระยะห่างอักขระ
ypos [i] = ypos [I-1]
-
xpos [0] = x+step // เขียนข้อมูลใหม่ลงในหางของคิวข้อมูลพิกัด
ypos [0] = y
สำหรับ (i = 0; i <message.length-1; i ++) {// เปลี่ยนพิกัดของเลเยอร์ที่แต่ละคำตั้งอยู่ตามข้อมูลของอาร์เรย์
var thispan = eval
thisspan.left = xpos [i]
thisspan.top = ypos [i]
-
-
var timer = settimeout ("makenake ()", 30) // หลังจาก 30 มิลลิวินาทีปรับตำแหน่งของตัวละครแต่ละตัวอีกครั้งตามสถานการณ์
-
</script>
</head>
<body bgcolor = "ffffff" onload = "makenake ()">>
<script>
<!- จุดเริ่มต้นของ JavaScript-
// ที่นี่เราสร้างช่วงเป็นคอนเทนเนอร์สำหรับแต่ละคำ
สำหรับ (i = 0; i <= message.length-1; i ++) {
document.write ("<span id = 'span"+i+"' class = 'spanstyle'>")
document.write (ข้อความ [i])
document.write ("</span>")
-
// ระบุกระบวนการจัดการเหตุการณ์การเคลื่อนไหวของเมาส์
if (document.layers) {
document.captureevents (event.mousemove);
-
document.onmousemove = movehandler;
// - จุดสิ้นสุดของ JavaScript - ->
</script>
</body>
<br> <b> เอฟเฟกต์นี้เจ๋งมากหรือไม่? </b> </br>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน