Rumah hujung hadapan web tutorial js js untuk merealisasikan pergerakan teks mengikut kemahiran pergerakan_javascript tetikus

js untuk merealisasikan pergerakan teks mengikut kemahiran pergerakan_javascript tetikus

May 16, 2016 pm 04:12 PM
js watak kaedah bergerak ikut tetikus

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

Salin kod Kod adalah seperti berikut:




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.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara membuat gambar bulat dan teks dalam ppt Cara membuat gambar bulat dan teks dalam ppt Mar 26, 2024 am 10:23 AM

Mula-mula, lukis bulatan dalam PPT, kemudian masukkan kotak teks dan masukkan kandungan teks. Akhir sekali, tetapkan isi dan garis besar kotak teks kepada Tiada untuk melengkapkan penghasilan gambar dan teks bulat.

Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato. Cara menulis novel dalam aplikasi Novel Percuma Tomato Kongsi tutorial cara menulis novel dalam Novel Tomato. Mar 28, 2024 pm 12:50 PM

Novel Tomato adalah perisian membaca novel yang sangat popular Kami sering mempunyai novel dan komik baru untuk dibaca dalam Novel Tomato Setiap novel dan komik sangat menarik ingin menulis ke dalam teks. Jadi bagaimana kita menulis novel di dalamnya? Kongsi tutorial novel Tomato tentang cara menulis novel 1. Mula-mula buka aplikasi novel percuma Tomato pada telefon bimbit anda dan klik pada Pusat Peribadi - Pusat Penulis 2. Lompat ke halaman Pembantu Penulis Tomato - klik pada Buat buku baru di penghujung novel.

Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam) Bagaimana untuk memulihkan kenalan yang dipadam pada WeChat (tutorial mudah memberitahu anda cara memulihkan kenalan yang dipadam) May 01, 2024 pm 12:01 PM

Malangnya, orang sering memadamkan kenalan tertentu secara tidak sengaja atas sebab tertentu WeChat ialah perisian sosial yang digunakan secara meluas. Untuk membantu pengguna menyelesaikan masalah ini, artikel ini akan memperkenalkan cara mendapatkan semula kenalan yang dipadam dengan cara yang mudah. 1. Fahami mekanisme pemadaman kenalan WeChat Ini memberi kita kemungkinan untuk mendapatkan semula kenalan yang dipadamkan Mekanisme pemadaman kenalan dalam WeChat mengalih keluar mereka daripada buku alamat, tetapi tidak memadamkannya sepenuhnya. 2. Gunakan fungsi "Pemulihan Buku Kenalan" terbina dalam WeChat menyediakan "Pemulihan Buku Kenalan" untuk menjimatkan masa dan tenaga Pengguna boleh mendapatkan semula kenalan yang telah dipadamkan dengan cepat melalui fungsi ini. 3. Masuk ke halaman tetapan WeChat dan klik sudut kanan bawah, buka aplikasi WeChat "Saya" dan klik ikon tetapan di sudut kanan atas untuk memasuki halaman tetapan.

Razer |. Tetikus tanpa wayar dan pad tetikus Pokémon Gengar kini tersedia, dengan harga ditetapkan 1,549 yuan Razer |. Tetikus tanpa wayar dan pad tetikus Pokémon Gengar kini tersedia, dengan harga ditetapkan 1,549 yuan Jul 19, 2024 am 04:17 AM

Menurut berita dari laman web ini pada 12 Julai, Razer hari ini mengumumkan pelancaran pad tetikus dan tetikus tanpa wayar Razer|Pokémon Gengar. Harga produk tunggal ialah 1,299 yuan dan 299 yuan, dan harga pakej termasuk kedua-dua produk ialah 1,549 yuan. Ini bukan kali pertama Razer melancarkan produk persisian jenama bersama Gengar pada 2023, Razer melancarkan tetikus permainan Yamata Orochi V2 gaya Gengar. Kedua-dua produk baharu yang dilancarkan kali ini semuanya menggunakan latar belakang ungu gelap yang serupa dengan penampilan keluarga Ghost, Ghost, dan Gengar Mereka dicetak dengan garis besar tiga Pokémon dan Poké Balls ini, dengan watak Gengar di tengah imej besar dan berwarna-warni Pokémon jenis hantu klasik. Laman web ini mendapati bahawa tetikus tanpa wayar Razer|Pokémon Gengar adalah berdasarkan Viper V3 Edisi Profesional yang dikeluarkan sebelum ini. Berat keseluruhannya ialah 55g dan dilengkapi dengan FOC generasi kedua Razer

HP melancarkan tetikus lembut tiga mod Profesor 1: 4000DPI, Blue Shadow RAW3220, harga awal 99 yuan HP melancarkan tetikus lembut tiga mod Profesor 1: 4000DPI, Blue Shadow RAW3220, harga awal 99 yuan Apr 01, 2024 am 09:11 AM

Menurut berita dari laman web ini pada 31 Mac, HP baru-baru ini melancarkan tetikus Bluetooth tiga mod Professor1 di JD.com, tersedia dalam warna teh susu hitam dan putih. Harga awal ialah 99 yuan, dan deposit sebanyak 10 yuan diperlukan. Menurut laporan, tetikus ini mempunyai berat 106 gram, menggunakan reka bentuk ergonomik, berukuran 127.02x79.59x51.15mm, mempunyai tujuh tahap 4000DPI pilihan, dilengkapi dengan sensor Blue Shadow RAW3220, dan menggunakan bateri 650 mAh dikatakan boleh digunakan dengan sekali caj 2 bulan. Maklumat parameter tetikus yang dilampirkan pada tapak ini adalah seperti berikut:

Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan Aug 12, 2024 pm 10:45 PM

Menurut berita dari laman web ini pada 12 Ogos, VGN melancarkan siri papan kekunci dan tetikus "Elden Ring" berjenama bersama pada 6 Ogos, termasuk papan kekunci, tetikus dan pad tetikus, yang direka dengan tema tersuai bagi siri Lani/Faded One produk Ia telah diletakkan di JD.com, berharga dari 99 yuan. Maklumat produk baharu jenama bersama yang dilampirkan pada tapak ini adalah seperti berikut: Papan Kekunci VGN丨Elden Law Ring S99PRO Papan kekunci ini menggunakan cangkerang aloi aluminium tulen, ditambah dengan struktur penyenyap lima lapisan, menggunakan struktur spring daun GASKET, mempunyai satu PCB berslot kunci, dan bahan PBT tinggi asal, satah belakang diperibadikan aloi aluminium menyokong sambungan tiga mod dan teknologi kependaman rendah SMARTSPEEDX, ia boleh menguruskan berbilang peranti dalam satu hentian, bermula pada 549 yuan; VGN丨Elden French Ring F1PROMAX tetikus wayarles tetikus

Bagaimana untuk menetapkan saiz fon pada telefon mudah alih (mudah melaraskan saiz fon pada telefon bimbit) Bagaimana untuk menetapkan saiz fon pada telefon mudah alih (mudah melaraskan saiz fon pada telefon bimbit) May 07, 2024 pm 03:34 PM

Menetapkan saiz fon telah menjadi keperluan pemperibadian yang penting kerana telefon mudah alih menjadi alat penting dalam kehidupan seharian manusia. Untuk memenuhi keperluan pengguna yang berbeza, artikel ini akan memperkenalkan cara meningkatkan pengalaman penggunaan telefon mudah alih dan melaraskan saiz fon telefon mudah alih melalui operasi mudah. Mengapa anda perlu melaraskan saiz fon telefon mudah alih anda - Melaraskan saiz fon boleh menjadikan teks lebih jelas dan mudah dibaca - Sesuai untuk keperluan membaca pengguna yang berbeza umur - Mudah untuk pengguna yang kurang penglihatan menggunakan saiz fon fungsi tetapan sistem telefon mudah alih - Cara memasukkan antara muka tetapan sistem - Dalam Cari dan masukkan pilihan "Paparan" dalam antara muka tetapan - cari pilihan "Saiz Fon" dan laraskan saiz fon dengan pihak ketiga aplikasi - muat turun dan pasang aplikasi yang menyokong pelarasan saiz fon - buka aplikasi dan masukkan antara muka tetapan yang berkaitan - mengikut individu

Bateri negatif silikon 6000 mAh! Peningkatan Xiaomi 15Pro bocor lagi Bateri negatif silikon 6000 mAh! Peningkatan Xiaomi 15Pro bocor lagi Jul 24, 2024 pm 12:45 PM

Menurut berita pada 23 Julai, blogger Digital Chat Station mengumumkan bahawa kapasiti bateri Xiaomi 15 Pro telah ditingkatkan kepada 6000mAh dan menyokong pengecasan kilat berwayar 90W Ini akan menjadi model Pro dengan bateri terbesar dalam siri digital Xiaomi. Stesen Sembang Digital sebelum ini mendedahkan bahawa bateri Xiaomi 15Pro mempunyai ketumpatan tenaga ultra tinggi dan kandungan silikon jauh lebih tinggi daripada produk pesaing. Selepas bateri berasaskan silikon diuji secara besar-besaran pada tahun 2023, bateri anod silikon generasi kedua telah dikenal pasti sebagai hala tuju pembangunan industri pada tahun ini. 1. Kapasiti gram teoretikal silikon boleh mencapai 4200mAh/g, iaitu lebih daripada 10 kali ganda kapasiti gram grafit (kapasiti gram teoretikal grafit ialah 372mAh/g). Untuk elektrod negatif, kapasiti apabila jumlah kemasukan ion litium mencapai maksimum ialah kapasiti gram teori, yang bermaksud bahawa di bawah berat yang sama

See all articles