Home > Developer > JavaScript
In fact, this should not be included in the scope of JS tutorials. It should be FF. IE6 and later browsers support the fixed attribute fixed. IE6 alone is not supported. So I tried to make ie6. Here is a tutorial. In addition, this effect can also exercise students' computing power. In the future, many results will require your computing power. Haha
Fixed center. Or the idea is almost the same everywhere. You only need to clarify the algorithm. The effect is easy to write. Post Code first
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <style> body, div {padding: 0px; margin: 0px ;}# gd {width: 100px; height: 100px; background: # F00; color: # FFF ;} </style> <title> fixed center </title> </pead> <body> How can I change the window size and height as needed? </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Var isIE = !! Window. ActiveXObject;
Var isIE6 = isIE &&! Window. XMLHttpRequest;
These two statements determine the browser. This is the method in Aajx. It is also easy to understand. I won't say much here. If you are interested, you can go to the Internet to find out and Judge various browsers.
Var t = (document.doc umentElement. clientHeight-document. getElementById ("gd"). offsetHeight)/2 + document.doc umentElement. scrollTop;
Var l = (document.doc umentElement. clientWidth-document. getElementById ("gd"). offsetWidth)/2 + document.doc umentElement. scrollLeft;
These two statements are important. I want to explain it carefully:
Document.doc umentElement. clientHeight, which is used to obtain the height of the current browser window.
Document. getElementById ("gd"). offsetHeight this is the actual height of the dom element.
Document.doc umentElement. scrollTop, which is used to obtain the height of the scroll bar.
Document.doc umentElement. clientHeight/2 half the height of the entire browser minus document. getElementById ("gd"). offsetHeight/2 half the height of our dom element. That is, the top distance between the DOM element to be centered and the top of the current browser. But this is just a dead height. Because the content of the browser cannot be less than or equal to the height of the current window of the browser. A scroll bar appears when the content is particularly high. We have document.doc umentElement. scrollTop, which is the height of the scroll bar. Adding the Real-Time dom element is the top distance from the top of the current browser when the element needs to be centered. Of course, the algorithm in the following sentence is the same as this one. I will not say much about it, I am also impressed by this.
I don't know if you understand this. This should be illustrated in text. But I think I should be clear about it. If you still have some fuzzy information. Painting on paper can be understood.
If the distance is clear. Now we only need to do the last thing. That is, when the scroll bar is rolled. The scroll height is added instantly. Then, set the t and l values to the top and left attributes of dom. This creates an illusion for users. I thought it was fixed there.
Copy codeThe Code is as follows:
If (isIE6 ){
SetInterval (function (){
T = (document.doc umentElement. clientHeight-document. getElementById ("gd"). offsetHeight)/2 + document.doc umentElement. scrollTop;
L = (document.doc umentElement. clientWidth-document. getElementById ("gd"). offsetWidth)/2 + document.doc umentElement. scrollLeft;
Document. getElementById ("gd"). style. position = "absolute"
Document. getElementById ("gd"). style. top = t + "px ";
Document. getElementById ("gd"). style. left = l + "px ";
}, 1)
This section serves this purpose. If (isIE6) is when isIE6 is true. That is, when it is the IE 6 browser. SetInterval (..., 1) this is to set a clock so that the statement can be executed every 1 microsecond in the IE 6 browser. That is, the t and l values are constantly updated. Then, the top and left attributes of DOM elements are constantly paid, which is very fast in 1 microsecond. The speed at which a user pulls a scroll bar cannot be 1 microsecond. Therefore, users cannot see anything. Think that is fixed there. Of course, you can also set a rolling event windon. onscroll. Or. But I don't think it's so good. If you are interested, you can also study it. (Don't worry about it. I think it is useful to study more things than to teach you a lot of things ).
Of course, none of IE6 browsers support the fixed attribute. Execute these statements.
Document. getElementById ("gd"). style. position = "fixed" // Add a fixed attribute to the dom element.
Document. getElementById ("gd"). style. top = t + "px"; // set a center tvalue for the dom element during initialization.
Document. getElementById ("gd"). style. left = l + "px"; // set a center l value for the dom element during initialization.
Okay. This article is here. This is centered. What else is the fixed bottom pull, fixed left pull and so on. The truth is the same. It's just that top and left are different. You can study it on your own. There are also setInterval and setTimeout methods. In the future, we will use a lot
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
