Home > Developer > Web Develop
Use JavaScript to simulate the glare fluctuation effect written in Flash effect, and use javascriptflash
<! 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> dazzling fluctuations </title>
<Script>
Var lightWave = function (T, left, thick, sharp, speed, vibration, amplity, opacity ){
This. cont = T; // glare container
This. left = left; // The offset to the right of the glare
This. thick = thick; // width
This. sharp = sharp; // Sharpness
This. speed = speed; // fluctuation speed
This. vibration = vibration; // vibration frequency per unit time
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 = '& nbsp ;';
P. style. top = 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.wav elength, color = this. color ();
Var c = document. createElement ('div ');
C. style. 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. amplwl;
Var vibration = this. vibration;
Var w = this.wav e (). 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 = true ){
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, 36,120, 40 );
New lightWave (targetDom, 70,120, 30 );
}
</Script>
</Head>
<Body style = "background: #000; margin-top: 100px">
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</Body>
</Html>
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
