Bagikan plug-in yang secara otomatis jatuh tetesan air, alamat unduh: https://github.com/foreverjiangting/rainyday.js
Mari kita lihat bagaimana menggunakannya? Tambahkan kode berikut untuk menjalankannya.
Efeknya adalah sebagai berikut:
Kodenya adalah sebagai berikut:
<! Doctype html> <html> <head> <tyle> </tyle> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <script type = "text/javascript"> function runimage () {var var image = document.geteLementById ("img"); image.src = "4.jpg"; image.onload = function () {// Atur objek hujan var engine = baru hujan ({{gambar: this,}); // Memanggil mesin fungsi hujan. Juga dapat menjadi engine.rain ([[6,8000]]), pada saat ini ukuran tetesan air lebih kecil. Muat gambar silang domain} </script> </head> <body onload = "runimage ();" > <dv> <img src = "4.jpg" id = "img"> </div> <script type = "text/javascript" src = "rainy.js"> </script> </body> </html>Mari kita pelajari beberapa kode Rainy.js di bawah ini. Lihat kode sumber di GitHub di atas:
Rainyday.prototype.rain = function (preset, speed) {// Siapkan kanvas untuk pemetaan drop if (this.reflection! == this.reflection_none) {this.preparereflections ();} this.animatedRops (); // animasi this.presets = presets; this.praving.psgravity (); // animasi this.presets = presets; this.praving.psets.psgravy (); 0.001)/ 25; this.private_gravity_force_factor_x = ((math.pi/ 2) - this.options.gravityangle) * (this.options.fps * 0.001)/ 50; // Model untuk mempersiapkan jatuhnya (ini. = 0; i <presets.length; Math.ceil (this.canvas.width / maxdropradius); var mhi = math.ceil (this.canvas.height / maxdropradius); this.matrix = collisionMatrix baru (mwi, mhi, maxdropradius);} elision {this.options. presets.length; i ++) {if (! presets [i] [3]) {preset [i] [3] = -1;}} var lastExecutiontime = 0; this.adddropCallback = function () {var timestamp = new date (). getTime (); ifestamp - lastExecutionTamp <) {getTime (); ifestamp - lastExecutionTam <) this.canvas.getContext ('2d'); context.clearrect (0, 0, this.canvas.width, this.canvas.height); context.drawimage (this.background, 0, 0, this.canvas.width, this.canvas.height); // pilih Model yang cocok. {if (preset [i] [2]> 1 || preset [i] [3] === -1) {if (preset [i] [3]! == 0) {preset [i] [3]-; for (var y = 0; y <preset [i] [2]; ++ y) {ini. Math.random () * this.canvas.height, preset [i] [0], preset [i] [1]));}} lain jika (math.random () <preset [i] [2]) {preset = preset [i]; break;} if (preset) {this.putet, this. Math.random () * this.canvas.height, preset [0], preset [1])));} context.save (); context.globalalpha = this.opacity; context.drawimage (this.glass, 0, 0, this.canvas.width, this.canvas.height); context.rest.Di sini saya ingin menyebutkan pertanyaan tentang sumber daya lintas domain, gambar.crossorigin = "jt"; Memuat gambar domain silang. Pada awalnya, saya menggunakan gambar domain silang, tetapi ada masalah, dan kemudian saya menggunakan gambar lokal untuk memuat, yaitu src = "4.jpg", dan tidak ada masalah. Bahkan, jika Anda ingin menggunakan gambar lintas domain, cukup tambahkan gambar.crossorigin = "jt" ;; Kode.
(Presponse adalah bahwa server telah mengaktifkan izin)
Ini melibatkan masalah CORS, mari kita lihat: nama lengkap CORS adalah "berbagi sumber daya silang". Ini memungkinkan browser untuk melintasi server asal
Menerbitkan permintaan XMLHTTPREQUEST mengatasi batasan bahwa AJAX hanya dapat digunakan pada asal yang sama.
Kami juga menggunakan kolom di atas untuk melihat masalah:
<! Doctype html> <html> <head> <tyle> </tyle> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <script type = "text/javascript"> function runimage () {var var Image = document.getElementById ("img"); image.onload = function () {// Setel objek hujan var engine = baru hujan ({{this,}); engine.rain ([[4,6,8000]]); // atur ukuran hujan 4,6 jumlahnya adalah 8000Engine.rain ([[3,3,0,88], [5,5,0,9], [6,2,1]], 100); // Atur waktu pengulangan hujan} // gambar.crossorigin = "jt"; // gambar cross-domain. } </script> </head> <body onload = "runimage ();" > <vet> <img src = "http://img0.imgtn.bdimg.com/it/u=93809694,3074232342&fm=21&gp=0.jpg" id = "img"> </div> <script type = "text/javascript" src = "rainy.js"> </script> </body> </html>Mari kita lihat informasi di konsol debug:
Terima gambar/png, gambar/*; q = 0,8,*/*; q = 0,5cept-encoding GZIP, deflateaccept-bahasa ZH-CN, ZH; q = 0,8, en-US; q = 0,5, q = 0,3 connonpection Keep-noHost IMG0.IMGTN.BDIMG ISIGECECING INDIOCE-INDEP-NULGOST IMG0.IMGTN.BDIMG.BIMGOCING INDICECE-INDIF-THE NOULGOST IMG0 IMG0 Permintaan berasal dari (Protokol + Nama Domain + Port). Server memutuskan apakah akan menyetujui permintaan berdasarkan nilai ini. Itu tidak dalam lingkup izin. Server akan mengembalikan respons HTTP normal. Browser menemukan bahwa informasi header dari respons ini tidak berisi bidang akses-kontrol-awal-origin (lihat di bawah untuk detailnya), jadi diketahui bahwa kesalahan terjadi, dan dengan demikian kesalahan dilemparkan, yang ditangkap oleh fungsi panggilan balik ONERROR dari XMLhttprequest. Perhatikan bahwa kesalahan ini tidak dapat diidentifikasi oleh kode status, karena kode status respons HTTP mungkin 200. Get/Cors http/1.1origin: http: //api.bob.comhost: api.alice.comccept-language: en-usconnection: Keep-aliveUser-AGENT: MOZILLE/5.0. Pengguna-agen mozilla/5.0 (Windows NT 6.1; RV: 46.0) Gecko/20100101 Firefox/46.0
Jika nama domain yang ditentukan oleh Origin berada dalam ruang lingkup izin, respons yang dikembalikan oleh server akan memiliki beberapa bidang header tambahan.
Konten di atas adalah plug-in yang dibagikan oleh editor untuk mencapai efek jatuh tetesan tetesan otomatis. Saya harap Anda menyukainya!