Floating layer effect implementation for compliant standard XHTML

xhtml| Standard | floating | floating Layer | special effects

　　Keywords: div, layer, absolute, layer, move, setcapture

1. Display and move of floating layer

A simple example:
<div ID= "Mydiv"style= "Position:absolute;" >my Div Contents</div>
<script language= "JavaScript">
varDX = 10;
varDY = 10;
functionMydivmove (x, y) {
varid = ' Mydiv ';
if(Document. layers) {
Document. layers[' +id+ '].left = x;
Document. layers[' +id+ '].top = y;
}
else if(Document. All) {
Document. all[' +id+ '].style.left=x;
Document. all[' +id+ '].style.top=y;
}
else if(document.getElementById) {
Document. getElementById (' +id+ '). style.left=x+ "px";
Document. getElementById (' +id+ '). style.top=y+ "px";
}
}

Mydivmove (Dx,dy);
</script>

The main problem is that different browsers for the level of the coordinates to obtain different ways, especially to pay attention to when through the getElementById to obtain the layer coordinates (non IE browser), change the coordinates of the time to add "px" suffix, rather than directly to the number assignment.

2. About Window.onscroll

G_mybodyinstance = (document.documentelement Document.documentElement:window);
G_mybodyinstance.onscroll = Mydivscrollfunc;

The code above implements a compatible onscroll event handling. You can see that for Firefox, the Onscroll event is subordinate to the Document.documentelement object rather than the Window object.

But it seems that the Firefox browser for scrolling through the page through the mouse button does not triggeronscrollevent, and only drag the window scroll bar to the right to trigger it, which brings me a lot of trouble, so that if you want to allow the user to browse the page at any time a floating layer (such as my navigation bar) is always in the visible range of the page, you have to usesetintervalOrsettimeoutTo constantly change the position of this floating layer. And you can't use triggeronscroll、onresizeThe two events are reset at the display location. This is obviously a inefficient approach. Fortunately, standard XHTML provides a CSS property value that can be set to achieve the goal by setting this value:
<script>
varID =' Mydiv ';
if(Document. layers) {
Document. layers[' +id+ '].position =' fixed ';
}
else if(Document. All) {
Document. all[' +id+ '].style.position=' fixed ';
}
else if(Document. getElementById) {
Document. getElementById (' +id+ '). style.position=' fixed ';
}
</script>

The position fixed property allows the layer to always be at the specified position of the window. From the display effect, the display effect on Firefox than in IE through the onscroll trigger layer position to move the processing display effect is much better, do not see the layer flashing.

3. About OnMouseMove

For IE, the simulation mouse drag-and-drop operation related processing is as follows:
Capture Mouse Movement
Mydiv.setcapture ();
document. onmousemove = Mydivmovefunc;
Release mouse movement
Mydiv.releasecapture ();
document. onmousemove = null;

For Firefox browsers, this is done:
Capture Mouse Movement
window. captureevents (Event.mousemove);
window. onmousemove = Mydivmovefunc;
Release mouse movement
window. releaseevents (Event.mousemove);
window. onmousemove = null;

Visible IE support for the refinement of the event capture to a layer, and Firefox can only capture the entire page of all the same events. From the actual display effect, ie performance of the drag effect to be significantly better. For a complete implementation of mouse drag and drop, see http://www.webjx.com/htmldata/2005-06-14/1118735650.html

Digression: Found the original style= "cursor:pointer;" Is the standard usage, has been written in style= "Cursor:hand;" Said, hehe.