Author: Fengyong Yao
The Light filter can generate an effect of analog source, but use it to be implemented by calling its "method (Method)", this is to use some JavaSCRPT knowledge, although there is a little difficult, but the effect is also strange, Let's see the following effects.
Figure 1
Figure 2 Light source filter effect
Is this effect on it cool? ! When you move your mouse on the picture, the light will move! But here is just a picture, when you do it in the method I introduced below, you can try how to let the lights follow the mouse movement! In fact, this effect is not difficult to do in DW3, but this time it is not possible to use the mouse point. Then let's start doing it.
Production steps.
1. Click on the "IMGE" icon on the object panel to insert a picture;
2, with the mouse point, open the picture of the DW3, open this code, add such code to the "IMGE" tag just inserted into the picture: ID = "Lightsy" style = "Filter: light (enabled = 1)";
3, then insert a JavaScript program after the "IMGE" tag code of the source code of the web page:
// Call Set the light source function
Window.οnlοad = setlights1;
// Get a mouse handle
Lightsy.οnmοusemοve = mousehandler;
// Call the Light filter method
Function setLights1 () {
Lightsy.filters [0] .addcone (380, -20, 5, 100, 100, 255, 255, 0, 40, 25);
// Capture the mouse position to move the light focus
Function MouseHandler ()
{
x = (Window.Event.x-40);
Y = (window.event.y-40);
Lightsy.Filters [0] .Movelight (0, x, y, 5, 1);
}
->
script>
If you don't want the mouse to control the light movement, then just do the following lines of code:
// Call Set the light source function
Window.οnlοad = setlights1;
// Call the Light filter method
Function setLights1 ()
{
Lightsy.filters [0] .addcone (380, -20, 5, 100, 100, 255, 255, 0, 40, 25);
}
->
script>
At this point, you can see the wonderful effect in F12, it is not difficult! We not only need to know, but also to know what it is, this example is that this program code: Lightsy.Filters [0] .addcone (380, -20, 5, 100, 100, 255, 255, 0, 40, 25); parentheses The value can be modified. You can get a variety of light effects by setting different values, then what do these numerical parameters do?
The first parameter: the X coordinate of the light source; the second parameter: the Y coordinate of the light source; the third parameter: the height of the source leaves the page; the fourth to sixth parameters: the color of the light source; seventh parameters: Light source Human phase; eighth parameter: the shape of the light source; the ninth parameter: the intensity of the light of the light source; the tenth parameter: the range of the light source is scattered. What should I do if a source is not enough? You can add any light source. The method is also very simple, it is to add a few words in the "setlights1" function to add a few words [0] .addcone (380, 5, 5, 100, 100, 255, 255, 0, 40, 25), don't forget to change the parameters, otherwise, The light source can not see the effect in the same location.
The above is just used by JavaScript to call the "AddCone" and "Movelight" method of the Light filter with JavaScript. There are still some ways at the Light filter, as follows:
Addambient: Add the enclosed light source;
AddPoint: Add Point Light Source;
CHANGCOLOR: Change the color of the light;
ChangeStrength: Change the strength of the light source;
CLEAR: Clear all light sources.
We only need to change the JavaScript program above, you can get more wonderful and effective.