Teilen Sie ein Plug-In, das automatisch Wassertröpfchen fällt, Download-Adresse: https://github.com/foreverjianging/rainyday.js
Mal sehen, wie man es benutzt? Fügen Sie den folgenden Code hinzu, um ihn auszuführen.
Der Effekt ist wie folgt:
Der Code ist wie folgt:
<! DocType html> <html> <kopf> <style> </style> <meta http-äquiv = "content-type" content = "text/html; charSet = utf-8"/> <title> </title Image = document. // Aufrufen der Regenfunktion Engine Kann auch Motor sein. Laden Sie das Cross-Domain-Bild} </script> </head> <body onload = "runimage ();" > <div> <img src = "4.jpg" id = "img"> </div> <script type = "text/javaScript" src = "rainy.js"> </script> </body> </html>
Lassen Sie uns einen Teil des unten stehenden Rainy.js -Codes untersuchen. Siehe den Quellcode in GitHub oben:
Rainyday.prototype.rain = function (Presets, Geschwindigkeit) {// Leinwand für Drop -Mapping if (this.reflection! 0.001)/ 25; this.private_gravity_force_factor_x = ((math.pi/ 2) - this.options.PravityAngle) * (this.options.fps * 0,001)/ 50; // Modell, um den Herbst (this.options.options.EnableCollisions) zu erstellen. = 0; Math.ceil (this.canvas.width / maxdropradius); var mhi = math.ceil (this.canvas.height / maxdropradius); this.matrix = new Collisionmatrix (MWI, MHI, MaxDropadius); i ++) {if (! Presets [i] [3]) {Presets [i] [3] = -1;}} var lastExecutiontime = 0; 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). {if (Presets [i] [2]> 1 || Presets [i] [3] === -1) {if (Presets [i] [3]! == 0) {Presets [i] [3]-; für (var y = 0; Math.random () * this.canvas.height, Presets [i] [0], Presets [i] [1]);}} else if (math.random () <voreinstände [i] [2]) {Preset = Preset = Presets [i];}} if (Preset) {This.putdrop (neue Drop (neue Drop) (thatn (neue Drop) (neuer), this, this. Math.random () * this.canvas.height, Preset [0], Preset [1]);Hier möchte ich die Frage nach Cross-Domain-Ressourcen erwähnen. Crossorigin = "JT"; Laden von Cross-Domänen-Bildern. Am Anfang habe ich Cross-Domain-Bilder verwendet, aber es gab ein Problem, und dann habe ich das lokale Bild zum Laden verwendet, d. H. Src = "4.JPG", und es gab kein Problem. Wenn Sie Cross-Domain-Bilder verwenden möchten, fügen Sie einfach Bild hinzu. Crossorigin = "JT" ;; der Code.
(Presponse ist, dass der Server Berechtigungen ermöglicht hat)
Dies beinhaltet eine CORS-Ausgabe. Schauen wir uns an: Der vollständige Name von CORS lautet "Cross-Origin-Ressourcenfreigabe". Damit ermöglicht dem Browser Cross-Origin-Server
Die Ausstellung einer XMLHTTPrequest -Anfrage überwindet die Einschränkung, dass AJAX nur in demselben Ursprung verwendet werden kann.
Wir verwenden auch die obige Spalte, um das Problem anzuzeigen:
<! DocType html> <html> <kopf> <style> </style> <meta http-äquiv = "content-type" content = "text/html; charSet = utf-8"/> <title> </title Image = document.GetElementById ("img"); Image.onload = function () {// Setzen Sie ein Regenobjekt var Engine = neuer Rainyday ({Bild: this,}); Engine.rain ([[4,6,8000]]); // Raidrop -Größe 4,6 Setzen Sie die Nummer die Nummer. 8000Engine.rain ([[3,3,0,88], [5,5,0,9], [6,2,1]], 100); // Die Wiederholungszeit der Regentrop -Wiederholung} // image.crossorigin = "jt"; // cross-domain image.src = "http://img0.imgtn.bdimg.com/it/u=93809694,3074232342&fm=21&gp=0.jpg"; } </script> </head> <body onload = "RunImage ();" > <div> <img src = "http://img0.imgtn.bdimg.com/it/u=938096994,3074232342&fm=21&gp=0.jpg" id = "img"> </> <script = "text/javascript" " src = "rainy.js"> </script> </body> </html>Schauen wir uns die Informationen in der Debug -Konsole an:
Bild/png, Bild/*; q = 0,8,*/*; q = 0,5accept-kodierende GZIP, Deflateaccept-Sprache ZH-CN, ZH; q = 0,8, En-us; Die Anfrage stammt von (Protokoll + Domänenname + Port). Der Server entscheidet, ob auf diesem Wert der Anfrage zustimmen soll. Es liegt nicht im Rahmen der Erlaubnis. Der Server gibt eine normale HTTP -Antwort zurück. Der Browser stellte fest, dass die Headerinformationen dieser Antwort nicht das Feld "Zugriffskontroll-Owl-Origin-Origin) enthielten (siehe unten für Einzelheiten), so dass ein Fehler aufgetreten war und somit ein Fehler geworfen wurde, der durch die Onerror-Rückruffunktion von XMLHTTPREQUEST erfasst wurde. Beachten Sie, dass dieser Fehler nicht durch den Statuscode identifiziert werden kann, da der Statuscode der HTTP-Antwort 200. Get/cors http/1.1Origin: http: //api.bob.comhost: api.alice.comaccept-sprang: en-usconnection: keep-alivuser-Agent: Mozilla/5.000000. Benutzer-Agent Mozilla/5.0 (Windows NT 6.1; RV: 46.0) Gecko/20100101 Firefox/46.0
Wenn sich der vom Ursprung angegebene Domänenname innerhalb des Berechtigungsbereichs befindet, verfügt die vom Server zurückgegebene Antwort über mehrere zusätzliche Headerfelder.
Der obige Inhalt ist ein Plug-in, das vom Editor geteilt wird, um den automatischen Tröpfchen-Fall-Fall-Effekt zu erzielen. Ich hoffe es gefällt dir!