Comparta un complemento que caiga automáticamente las gotas de agua, descargue la dirección: https://github.com/foreverjiangting/rainyday.js
¿Veamos cómo usarlo? Agregue el siguiente código para ejecutarlo.
El efecto es el siguiente:
El código es el siguiente:
<! Doctype html> <html> <fead> <style> </style> <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 () {// establece un objeto de lluvia var motor = new RainyDay ({image: this,}); // Llamando a la función de lluvia Engine.Rain ([[4,6,8000]]); // Establezca el tamaño de la gota de lluvia 4,6 a 8000 || También puede ser motor.rain ([[6,8000]]), en este momento el tamaño de la gota de agua es un motor más pequeño. Cargar imagen de dominio cruzado} </script> </head> <body onload = "runiMage ();" > <div> <img src = "4.jpg" id = "img"> </div> <script type = "text/javascript" src = "rainy.js"> </script> </body> </html>Estudiemos parte del código Rainy.js a continuación. Vea el código fuente en GitHub arriba:
Rainyday.prototype.rain = function (presets, speed) {// Prepare el lienzo para la asignación de caída if (this.reflection! == this.reflection_none) {this.prepareFlections ();} this.animatedROps (); // animación this.pressets = presets; this.pivate_gravity_force_y = (this.oPtions.oPtions.pps. 0.001)/ 25; this.private_gravity_force_factor_x = ((math.pi/ 2) - this.options.gravityangle) * (this.options.fps * 0.001)/ 50; // modelo para preparar el otoño if (this.options.enablecollisions) {// calcula la esquina de gotción más grande de la esquina redondeada de la caída de agua de caída 0; Math.ceil (this.canvas.width / maxdropradius); var mhi = math.ceil (this.canvas.height / maxdropradius); this.matrix = new CollisionMatrix (Mwi, Mhi, maxDropRadius); Presets.length; I ++) {if (! 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); // seleccionar el modelo var de varía; para (para presets; i = 0; i <0; i i ++) {if (presets [i] [2]> 1 || preajuste [i] [3] === -1) {if (presets [i] [3]! == 0) {presets [i] [3]-; for (var y = 0; y <presets [i] [2]; ++ y) {this.putdrop (New Drop (this, Math.Random () * this.canvas. Math.random () * this.canvas.height, presets [i] [0], presets [i] [1]));}} else if (math.random () <presets [i] [2]) {preet = preins [i]; break;}} if (preset) {this.putdrop (New Drop (this, Math.Random () * this.canvas. Math.random () * this.canvas.height, preet [0], preet [1]));} context.save (); context.globalalpha = this.opacity; context.drawimage (this.glass, 0, 0, this.canvas.width, this.canvas.height); context.restore ();}.Aquí quiero mencionar la pregunta sobre los recursos de dominio cruzado, image.crossorigin = "jt"; Carga de imágenes de dominio cruzado. Al principio, usé imágenes de dominio cruzado, pero había un problema, y luego usé la imagen local para cargar, es decir, src = "4.jpg", y no hubo problema. De hecho, si desea usar imágenes de dominio cruzado, simplemente agregue image.crossorigin = "jt" ;; el código.
(Presponse es que el servidor tiene permisos habilitados)
Esto involucra el problema de Cors, echemos un vistazo: el nombre completo de Cors es "compartir recursos de origen cruzado". Permite que el navegador sea un servidor de origen cruzado
La emisión de una solicitud XMLHTTPREQUEST supera la limitación de que AJAX solo puede usarse en el mismo origen.
También usamos la columna anterior para ver el problema:
<! Doctype html> <html> <fead> <style> </style> <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 () {// establece un objeto de lluvia var motor = new RainyDay ({Image: this,}); Engine.rain ([[4,6,8000]]); // Establece el tamaño de la ddrop de lluvia 4,6 El número es es es 8000Engine.Rain ([[3,3,0.88], [5,5,0.9], [6,2,1]], 100); // establece el tiempo de repetición de la gota de lluvia} // image.crossorigin = "jt"; // Imagen de CrossDomain Image.src = "http://img0.imgtn.bdimg.com/it/u=938096994,3074232342&fm=21&gp=0.jpg"; } </script> </head> <body onload = "runiMage ();" > <Viv> <img src = "http://img0.imgtn.bdimg.com/it/u=938096994,3074232342&fm=21&gp=0.jpg" id = "img"> </div> <scripty tipo = "text/javaScript" src = "Rainy.js"> </script> </body> </html>Echemos un vistazo a la información en la consola de depuración:
Aceptar imagen/png, imagen/*; q = 0.8,*/*; q = 0.5accept-ending gzip, deflateAccept-lenguaje zh-cn, zh; q = 0.8, en-us; q = 0.5, en; q = 0.3Connection Keep-AliveHost img0.imgtn.bdimg.comorigin null --- en el campo de la cabeza anterior, la información de la cabeza, el origen se usa, lo que se produce, lo que se produce, lo que se produce, lo que se produce, en el que se produce el campo de origen anterior. La solicitud proviene de (protocolo + nombre de dominio + puerto). El servidor decide si acepta la solicitud en función de este valor. No está dentro del alcance del permiso. El servidor devolverá una respuesta HTTP normal. El navegador descubrió que la información del encabezado de esta respuesta no contenía el campo de origen de control de acceso de acceso (ver más abajo para más detalles), por lo que se sabía que ocurrió un error y, por lo tanto, se lanzó un error, que fue capturado por la función de devolución de llamada Onerror de XMLHTTPREQUEST. Tenga en cuenta que este error no puede identificarse mediante el código de estado, porque el código de estado de la respuesta HTTP puede ser 200. Get/cors http/1.1origin: http: //api.bob.comhost: api.alice.comaccept-language: en-usconnection: keep-aliveUser-agent: mozilla/5.0. Mozilla/5.0 de agente de usuario (Windows NT 6.1; RV: 46.0) Gecko/20100101 Firefox/46.0
Si el nombre de dominio especificado por Origin está dentro del alcance del permiso, la respuesta devuelta por el servidor tendrá varios campos de encabezado adicionales.
El contenido anterior es un complemento compartido por el editor para lograr el efecto de caída automática de gotas de gotas. ¡Espero que te guste!