JavaScript application analysis for DOM (5)

JavaScript application analysis for DOM (5)_DOM

WBOY

Release： 2016-05-16 17:54:08

Original

922 people have browsed it

In fact, this should not be included in the scope of JS tutorials. It should be FF. IE6 and above browsers support the fixed attribute. Only IE6 does not support it. So I went for the damn IE6. I'll give you a tutorial here. Moreover, this effect can also exercise students' computing skills. Many of the effects in the future will require your computing power. Haha
Fixed to center. Or the thoughts are almost the same wherever they are fixed. As long as you want the algorithm to be clear. The effect is a breeze to write. Post the code first

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

var isIE=!!window .ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
These two sentences are used to determine the browser. This is the method in Aajx. It’s also easy to understand. I won’t say much more here. If you are interested, you can search online to learn about various browsers.

var t= (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 document.documentElement.scrollTop;
var l = (document.documentElement.clientWidth - document. getElementById("gd").offsetWidth)/2 document.documentElement.scrollLeft;
These two sentences are the key points. I want to say it carefully:
document.documentElement.clientHeight is to get the height of the current browser window.
document.getElementById("gd").offsetHeight This is to get the actual height of our dom element.
document.documentElement.scrollTop This is to get the height of the scroll bar.

document.documentElement.clientHeight/2 is half the height of the entire browser minus document.getElementById("gd").offsetHeight/2 is half the height of our dom element. It is the top distance from the top of the current browser that our DOM element needs to be centered. But this is just a dead end. Because the content of the browser cannot be exactly less than or equal to the height of the browser's current window. Scroll bars will appear when the content is particularly high. Fortunately, we have document.documentElement.scrollTop, which is the height of our scroll bar. Adding it is the top distance from the top of the current browser when the real-time DOM element needs to be centered. Of course, the algorithm in the following sentence is the same as this one. I won’t go into more details and let everyone understand it. This will make a deep impression. a little.

I don’t know if you understand what I said. This should be explained with pictures and text. But I think what I said should be quite clear. If you are still a little confused. You can understand it by just drawing on paper.
If the distance is clear. Now we just have to do one last thing. That's when the scroll bar scrolls. The scroll height is added in real time. Then set the immediate t and l values to the top and left attributes of the dom. This can create a false impression for users. Thought this was fixed there.

Copy code

The code is as follows:

 
if(isIE6){ 
setInterval(function( ){ 
t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 document.documentElement.scrollTop; 
l = (document.documentElement.clientWidth - document.getElementById(" gd").offsetWidth)/2 document.documentElement.scrollLeft; 
document.getElementById("gd").style.position = "absolute" 
document.getElementById("gd").style.top = t "px"; 
document.getElementById("gd").style.left = l "px"; 
},1) 