Home > Developer > JavaScript
JavaScript write bright light fluctuation effect, see some flash effect is good, with JS also simulate, there are many imperfect places, for you reference.
See Flash's implementation of this kind of animation is very convenient, so try to fool around. All is the pixel point that simulates with DOM, the sawtooth is unavoidable ...
To avoid the sawtooth I am afraid to add a filter again, or use the picture.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95-96 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <title> Bright light ripple effect </title> <script > var Lightwave = function (t,left,thick,sharp,speed,vibration,amplitude,opacity) {This.cont = t;//bright light container this.left = left;//glare to the right offset This.thick = thick;//thickness this.sharp = sharp;//sharpness this.speed = speed;//fluctuation Speed this.vibration = vibration;//unit Vibration frequency This.amplitude = amplitude;//amplitude this.opacity = opacity;//transparency this.cont.style.position = ' relative '; This.move (); } Lightwave.prototype = {point:function (n,l,t,c,color) {var p = document.createelement (' P '); p.innerhtml = '; p.style.t OP = t + ' px '; P.style.left = l + ' px '; P.style.width = 1 + ' px '; P.style.height = n + ' px '; P.style.filter = ' alpha (opacity= ' +this.opacity+ ') '; p.style.lineheight = 0; p.style.position = ' absolute '; P.style.background = color; C.appendchild (P); return this; }, Color:function () {VAr c = [' 0 ', ' 3 ', ' 6 ', ' 9 ', ' C ', ' F ']; var t = [C[math.floor (Math.random () *100)%6], ' 0 ', ' f ']; T.sort (function () {return math.random () >0.5?-1:1;}); Return ' # ' +t.join ('); }, Wave:function () {var L = this.left,t = This.wavelength,color = This.color (); var c = document.createelement (' div '); c.s Tyle.top = this.amplitude+20+ ' px '; c.style.position = ' absolute '; c.style.opacity = this.opacity/100; for (Var i=1;i<this.thick;i++) {for (Var j=0;j<this.thick*this.sharp-i*i;j++,l++) {This.point (i,l,-9999,c, color); for (Var i=this.thick;i>0;i--) {for (var j=this.thick*this.sharp-i*i;j>0;j--, l++) {this.point (i,l,-9999,c, color); } this.cont.appendChild (c); return C; }, Move:function () {var wl = This.amplitude; var vibration = This.vibration; var w = This.wave (). getElementsByTagName (' P ') ; for (Var i=0;i<w.length;i++) {w[i].i = i.} var m = function () {for (Var i=0,len=w.length;i<len;i++) {if (W[i].ori = = T Rue) {w[i].i-=vibration; var top = W[i].i%180==90?0:wl*math.cos (w[i].i*math.pi/180); W[i].style.top = top+ ' px '; if (parsefloat (w[i].style.top) <=-wl) {W[i].ori = false;}} else{w[i].i+=vibration var top = W[i].i%180==90?0:wl*math.cos (w[i].i*math.pi/180); w[i].style.top = top+ ' px '; if ( Parsefloat (w[i].style.top) >=wl) {W[i].ori = true;}} } setinterval (M,this.speed); } window.onload = function () {var targetdom = document.body; new Lightwave (targetdom,0,3,36,120,6,20,40); new Lightwave ( TARGETDOM,50,2,70,120,10,30,30); } </script> </head> <body style= "background: #000; margin-top:100px" > </body> </html> |
Parameters:
?
| 1 2 3 4 5 6 7 8 9 10 11-12 | var Lightwave = function (t,left,thick,sharp,speed,vibration,amplitude,opacity) {this. cont = T;//You need to add a bright-light container Left The right offset at the time of the birth of glare this. Thick = thick; Degree of thickness this. Sharp = sharp; Sharp degree this. Speed = speed; Fluctuation speed this.vibration = vibration; Frequency of vibration in unit time this. Amplitude = amplitude; Amplitude this. Opacity = opacity; Transparency this. cont.style.position = ' relative '; this. Move (); } |
We are interested to have a discussion.
In addition, there is a problem, the above code under IE, the transparency filter does not work, the study learned that changing the location of the parent container will affect the child nodes of the transparent filter inheritance.
The above mentioned is the entire content of this article, I hope you can enjoy.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
