Since the Web page has published the standard for style sheets (CSS), each part of the HTML has begun to appear as an element, and the events are actually being introduced into the page, and Dynamic HTML has become a hot topic for discussion. In fact, the standard used by the consortium is Microsoft's DOM, which means that IE4.0 can better support CSS, and Microsoft has done a lot of useful research on CSS, and filter is a good example.
As we all know, JavaScript or VBScript as a scripting language, its function is imperfect, there are many high-level language functions can not be implemented, such as image processing functions. Filter is Microsoft's extension of CSS, and the concept of the filter in Photoshop, it can be a very simple way to the text effects on the page to deal with the effects of static, such as shadow, fuzzy effect, dynamic such as a variety of fading effect. Below I will explain carefully (the following content should be viewed under IE4.0):
Static filters:
To display the filter effect, you must first establish a region (<div>), and specify the range (width and height) of the area, and the following are the rules for a general area:
<style>
<!--Div {height:50;width:300;font-size:20pt}//-->
</style>
Place this style sheet between the "
<div>............</div>
Insert style sheet in the <div> tag: style= "filter: Style (parameter 1, parameter 2, parameter 3 ...);"
A complete example is given below:
<HTML>
<style>
div {height:100;width:400;font-size:20pt}
</style>
<body bgcolor=yellow>
<H1 Align=center>filter effects<div style= "Filter:wave (add=0,freq=1,lightstrength=20,phase=50,strength=20)" >
This is Div
Is
Wave-filtered</div>
<div style= "Filter:alpha (opacity=10, finishopacity=10, style=10, startx=10, starty=10, finishX=20, finishY=30, add= 0, direction=45, strength=10) ">
This is Alpha.
</div>
<div style= "Filter:blur (add=0,direction=45,strength=5)" >
This is blur effect.
</div>
<div style= "Filter:chroma (color=white)" >
This is chroma effect
</div>
<div style= "FILTER:FLIPV" >
This is FLIPV effect
</div>
</body>
The wave filter, for example, produces a sine wave in the vertical direction, where the parameter add indicates whether to add the original image (1= is, 0 = no), the freq represents the number of waves, the phase represents the initial offset of the waveform, and lightstrength the intensity of the light on the Ripple, The strength represents the intensity of the wave. The following table is all the filter styles and their parameters that are supported by the filter:
The color properties that appear frequently can be represented in hexadecimal (such as #ff0000), or in RGB () (such as RGB (255,0,0)), or in a system-recognized color name (such as red).
The above is the whole content of static filters, note that CSS is case-sensitive!
Live Filters
Dynamic filters can add moving fade, image conversion effects to the page, which can be divided into two kinds of blend (mixed) and reveal (display), the former can make the object fade or appear, the latter provides 24 kinds of image transformation effect. For a call to a live filter to drop the filter type, parameters, and so on that you want to define in a static filter, you also use the scripting language to control its state, first, before starting a dynamic effect, you need to equip (Apply), and then play the dynamic effect, You can also break the dynamic effect (Stop) while the dynamic effect is in progress, which can be implemented in the following ways:
Object name. filters (filter value). Apply ()
Object name. filters (filter value). Play ()
Object name. filters (filter value). Stop ()
The determination of the filter state can be judged by the "Object name. Filters (filter value). Status", which is 0 o'clock, indicating that the filter was not executed, and that the filter was completed at 1 o'clock, indicating that the filters were complete and that the filter was in execution when 2.
When you define filter, as mentioned above, you can have a blend ("Filter:blendtrans (duration= Time Value)", duration indicate the time required for the filter to execute, in seconds), and display ("Filter:revealtrans" ( duration= time value, transition= transition type) ", the transition type is a value from 0-23, see the mixed example below:
<body>
<div style= "position:absolute;left:200;top:50;width:400;height:220;background-
Color:yellow;
Color:blue;font-size:20px;border:solid black; "
id= "Main" >
<div id= "Inner1"
Style= "position:relative;left:20%;top:35%;width:60%;height:30%; Filter:blendtrans (duration=3); " >
<p align=center> Demo Area </p>
</div>
<div id= "Control" style= "position:absolute;left:180;top:180" >
<input Type=button value= "Start" >
</div>
</div>
<script language= "JavaScript" >
var curobj=inner1,i=0;
Words=new Array (3);
words[0]= "<p align=center> gradually Fade to </p>";
words[1]= "<p align=center> slowly emerge </p>";
words[2]= "<p align=center> This is the blend effect </p>";
function Togglemultimedia () {
Curobj.innerhtml=words[i];
if (curobj.filters (0). Status = 2) {
Curobj.filters (0). Stop ();
if (curObj.style.visibility = = "hidden")
curObj.style.visibility = "visible";
Else
curObj.style.visibility = "hidden";
Window.settimeout ("Togglemultimedia ()", 1);
}
Ready to start
Curobj.filters (0). Apply ();
if (curObj.style.visibility = = "hidden")
{curObj.style.visibility = "visible";}
Else
{curObj.style.visibility = "hidden";
if (i==2) i=-1;
i=i+1;}
Begin
Curobj.filters (0). Play ();
Window.settimeout ("Togglemultimedia ()", 4000);
}
</script>
</body>
The following example is an example of reveal.
<HTML>
<script language= "Javascript" >
var i=0;
function Filter_me () {
if (change.filters (0). status!=2) {i=i+1;
if (i%2!=0) {
Change.style.backgroundcolor= ' Yellow ';
Change.filters (0). Apply ();
Change.filters (0). Play ();
change.style.visibility= ' hidden ';
}
else {
Change.style.backgroundcolor= ' Brown ';
Change.filters (0). Apply ();
Change.filters (0). Play ();
change.style.visibility= ' Visible ';}
}
}
</script>
<body>
<div id=change style= "Color:blue;border:solid
Black;position:absolute;left:250;top:100;width:300;height:200;filter:revealtrans (Duration=0.8,Transition=23) " >Something like this:->
Change.filters (0). Apply ();
Change.filters (0). Play ();
change.style.visibility= ' hidden ';
Change.style.backgroundcolor= ' Yellow '
</div>
<div style= "position:absolute;left:470;top:310" >
<input Type=button id=button1 value= "click Me"
>
</div>
</body>
</HTML>
In the Frontpage98 can also be set by the parameters of the page to get, if you want to enter the page to show a special effect can be in the "<body>" before the mark to add "<meta http-equiv=" Page-enter "content=" Revealtrans (duration=1.0,transition=22) ">", this special effect in the Frantpage98 menu "style/page effects" found in the reveal of the 24 special effects you can find the name, It is worth mentioning that the 24th special effect can randomly select one of the previous 23 kinds of display.
