Contoh dalam artikel ini menerangkan cara js melaksanakan pergerakan teks mengikut pergerakan tetikus. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:
Ini ialah kod ciri tetikus yang sangat mudah Apabila anda menggerakkan tetikus pada halaman web, rentetan teks akan mengikuti pergerakan tetikus
var x,y
var step=18 //Ini ialah selang antara dua perkataan bersebelahan
var flag=0
var message="Script House www.jb51.net mengalu-alukan anda!" //Letakkan teks yang perlu dipaparkan di sini
message=message.split("") //Pisah rentetan kepada tatasusunan
var xpos=new Array() //Buat tatasusunan untuk merekodkan koordinat x bagi setiap kedudukan
untuk (i=0;i<=message.length-1;i) { //Berikan nilai awal kepada setiap elemen
xpos[i]=-50
}
var ypos=new Array() //Buat tatasusunan untuk merekodkan koordinat y bagi setiap kedudukan
untuk (i=0;i<=message.length-1;i) {
ypos[i]=-200
}
function movehandler(e){ //Kendalikan peristiwa pergerakan tetikus
x = (document.layers) ? e.pageX : document.body.scrollLeft event.clientX //Menurut pelayar yang berbeza, rekod kedudukan mendatar tetikus
y = (document.layers) ? e.pageY : document.body.scrollTop event.clientY //Rekod kedudukan menegak tetikus
flag=1 //Kedudukan tetikus telah berubah dan perlu dikira semula
}
function makesnake() {
if (flag==1 && document.all) { //If it is IE
untuk (i=message.length-1; i>=1; i--) { //Proses baris gilir koordinat
xpos[i]=xpos[i-1] langkah //Alihkan setiap data koordinat ke hadapan satu ruang dan tambahkan jarak aksara
ypos[i]=ypos[i-1]
}
xpos[0]=x step //Tulis data baharu ke penghujung baris gilir data koordinat
ypos[0]=y
untuk (i=0; i
var thisspan = eval("span" (i) ".style")// Jana objek operasi semasa spanx.style
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
else if (flag==1 && document.layers) { //Jika ia NS
untuk (i=message.length-1; i>=1; i--) { //Proses baris gilir koordinat
xpos[i]=xpos[i-1] langkah //Alihkan setiap data koordinat ke hadapan satu ruang dan tambahkan jarak aksara
ypos[i]=ypos[i-1]
}
xpos[0]=x step //Tulis data baharu ke penghujung baris gilir data koordinat
ypos[0]=y
untuk (i=0; i
var thisspan = eval("document.span" i) //Jana dokumen objek operasi semasa.spanx
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30) //Selepas 30 milisaat, laraskan kedudukan setiap aksara mengikut situasi sekali lagi
}
Bukankah kesan ini hebat?
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.