In the article "new HTML functions", I introduced several new features that are currently most widely used: layers, stacked style sheets, frames, and dynamic fonts. Let's take a look at the application of the layer on the web page.
I. Some instructions on new HTML Functions
Currently, the latest HTML functions have different support and explanations for different browsers. When applying these new features, we must consider their effects on various browsers, otherwise, a page that looks good on your own may be totally invisible to other browsers.
Currently, HTML standards are still html3.2. Netscape and Microsoft, the two giants in the browser market, strive to develop new features on their browsers to control the market, competition makes them incompatible. Netscape's html4 standard and ie4 DHTML both have their own new features. We should fully consider these factors when designing the homepage, and strive to make the homepage adapt to various browsers.
2. Tag layer application
Layer <layer> and <ilayer> are used to display the entities of the web content. Even Microsoft had to admire Netscape's success in this function, and predicted to support this mark in future ie versions. However, you can only use it in nv4 or NC4. I have already introduced the differences between layer and ilayer, as well as their attributes and functions in the new HTML features article. Let's create an application example:
Independent Background: In ie4, we can use the no-repeat value of the backgrount-repeat attribute to display an independent rather than tiled background, which makes your homepage style a new one, however, both NC and NV do not support this attribute. We can use layers to achieve this effect. And display it anywhere.
<HTML> <Body bgcolor = "ffffff"> ″〉
<〈! -- Background layer --> --〉
<Layer Top = "100" Left = "200" X-Index = "1"> ″〉
″〉
</Layer> 〉
<〈! -- Subject layer --> --〉
<Layer X-Index = "2"> ″〉
Common HTML statements
...
</Layer> 〉
</Body> 〉
</Html> 〉
Note that the value of the X-index attribute on the background layer must be smaller than that of the X-index attribute on the subject layer to ensure that the subject layer is on the background layer, otherwise, the background will cover the main layer. In this example, we can place images that overlap the subject at any position on the page.
Iii. Application of JavaScript middle-level objects
For the powerful layer function, only the markup language is used in NN or NC, which is undoubtedly a major loss for home page designers. Fortunately, the layer object is provided in JavaScript, so that we can apply it in NN (or NC) and IE. Of course, the version is later than 4.0.
Since nn4 and ie4 have different calling formats for JavaScript middle-level objects, we must first judge the browser of the browser when using the method:
<HTML> <Script language = "JavaScript"> ″〉
VaR appname = navigotor. appname = "Netscape ″;
If (appname)
{
Thelayer = Document. layer;
}
Else
{
Thelayer = Document. All ["layer"];
}
<〈! ----
After this thelayer object is created, we can call it. Now we use the partition to display the section mark Div to make a dynamic Layer Effect.
In fact, the dynamic layer dynamically changes the top and left values of the layer object so that the position of the layer is constantly changing, so that the pictures or texts loaded on the layer are moved. We are now working on the effect of flying geese from the top left corner of the page to the bottom right corner to express the artistic conception of the book.
Function move ()
{
If (parseint (thelayer. Top) (640)
// Set the display resolution to 640*480
{
Thelayer. Top = parseint (thelayer. Top) + 10;
Thelayer. Left = parseint (thelayer. Left) + 15;
}
SetTimeout ("move ()", 50 );
}
</SCRIPT> 〉
</Head> 〉
<Body bgcolor = "ffffff"> ″〉
<Div id = "layer" style = "position: absolute; top: 10; left: 10;"> ;″〉
″〉
</Div> 〉
Other Markup languages on the page 〉
...
</Body> 〉
</Html> 〉
In this example, the geese fall from the upper left corner to the lower right corner. We can first let it fly to A, and then use the top and left values at a as the starting point to let it fly to B, so we can let it fly according to the set route.
In the above example, we only use one layer, but if we want to make the effects of moving multiple images, we need to define objects of multiple layers at the same time. For example, to achieve the effect of falling maple leaves in autumn, at least four or five maple leaves are required. At this time, we need to declare a specific name for each layer object, in order to use the ID attribute in the <div> mark for identification.
<HTML> <Body> 〉
<Script language = "JavaScript"> ″〉
Thelayer = new array (n); // you can set N as needed.
Function layerinit ()
{
VaR appname = navigator. appname = "Netscape ″;
If (appname)
{
Thelayer [0] = Document. layer1;
Thelayer [1] = Document. Layer2;
...
Thela
Yer [N-1] = Document. layern;
}
Else
{
Thelayer [0] = Document. All ["layer1"];
Thelayer [1] = Document. All ["Layer2"];
...
Thelayer [N-1] = Document. All ["layern"];
}
}
... // Set the movement mode of each layer
</SCRIPT> 〉
<〈! -- When calling, each section block is marked with the name of a layer object: --> :--〉
<Div id = "layer1" style = "position: absolute; Z-index: 1; left = x1 PX; Top = Y1 PX; visibility: Inherit"> ″〉
″〉
</Div> 〉
<Div id = "Layer2" style = "position: absolute; Z-index: 2; left = x2 PX; Top = Y2 PX; visibility: Inherit"> ″〉
″〉
</Div> 〉
...
<Div id = "layern" style = "position: absolute; Z-index: N; left: Xn PX; top: yn px; visibility: Inherit"> ″〉
″〉
</Div> 〉
Other HTML statements 〉
...
</Body> 〉
</Html> 〉
Source of this example Program For more information, see http://yeti.yeah.net/mainpage.htm.
Note: In JavaScript, the first element label of the array starts from 0. The property of the Upper/lower relationship of the control layer is Z-index, instead of X-index in the layer tag. This is consistent with the Z axis of the three-dimensional coordinates. The larger the value, the higher the upper layer, that is, the closer we are.
Through the above examples, you can make full use of your imagination and make many special effects, such as the opening of multiple layers from a certain point to a certain point or convergence from a certain point to a specific point. You have mastered the application methods, and the rest is your own clever ideas.
