In fact, this should not be included in the JS Tutorial category. This fixed property should be supported for ff,ie6 above browsers. Only IE6 not supported. That's why I'm trying to IE6. I'll just give you a tutorial here. And this effect can also exercise students ' computational ability. In the future, many effects will require your computing power. Ha ha
Fixed center. or fixed in any place the thought is almost the same. Only you have to make the algorithm clear. 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> <script> window.onload = function () {var isie=!! Window. ActiveXObject; var Isie6=isie&&!window. XMLHttpRequest; 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; 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)} else{document.getElementById ("GD"). Style.position = "fixed" document.getElementById ("GD"). Style.top = t + "px" ; document.getElementById ("GD"). Style.left = L + "px"; } </script> <title> Fixed center </title> </pead> <body> <div id= "GD" > I'm right in the middle. How can you change the window big Small and high </div> <div > </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
var isie=!! Window. ActiveXObject;
var Isie6=isie&&!window. XMLHttpRequest;
These two sentences are to judge the browser. This is the method in AAJX. Also very well understood. I don't have much to say here. Everyone interested can go to the Internet to find out how to judge a variety of 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 focus. I want to say it carefully:
Document.documentElement.clientHeight This is to get the height of the current browser window.
document.getElementById ("GD"). Offsetheight this is the actual height of getting our DOM elements.
Document.documentElement.scrollTop This is the height that gets the scroll bar scrolling.
DOCUMENT.DOCUMENTELEMENT.CLIENTHEIGHT/2 half of the entire browser's height minus document.getElementById ("GD"). OFFSETHEIGHT/2 us half the height of the DOM element. That's the top distance that we need to center the DOM element to be in front of the current browser. But it's just a dead height. Because the content of the browser is not exactly equal to the height of the browser's current window. Scroll bars appear when content is particularly high. Fortunately we have document.documentElement.scrollTop that is the height of our scroll bar scrolling. Add him is the instant DOM elements need to center from the current browser top distance, of course, the following sentence of the algorithm and this is the same, I do not say more, but also let everyone understand, so the impression will be a bit deeper.
I do not know how to say that people do not understand. This should be illustrated with a graphic. But I think what I said should be quite clear. If you're still a little fuzzy. Draw on the paper and you can see it.
The distance is clear. Now we just need to do one last thing. Is the time to let the scroll bar scroll. Immediately add the height of the scroll. Then set the T and L values of the instant to the top and left properties of the DOM. This can create a false impression on the user. Thought it was fixed there.
Copy Code code 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)
This part is the role. if (isIE6) is when isIE6 this is true. Which is when the browser is IE6. SetInterval (..., 1) This is to set a clock to execute the statement every 1 microseconds in the IE6 browser. Which is constantly updating the values of T and L. And then constantly pay the top and left properties of the DOM element, 1 microseconds is very fast. The speed at which the user pulls the scroll bar is not likely to take as long as 1 microseconds. So it's impossible for users to see anything. Thought that was fixed there. Of course you can also set a scrolling event windon.onscroll. It's OK. But I don't think it's that good. People who are interested can also study (people do not idle my long-winded, I think I study more things, than I teach you a lot of things are useful).
Of course, if the browser is not IE6, the fixed attribute is supported. 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 centered T value on the DOM element when initialized.
document.getElementById ("GD"). Style.left = L + "px";//Set a centered L value on the DOM element when initializing
All right. This is the place to be. This is just centered. What else fixed the bottom pull, fixed the living Zola and so on. The truth is the same. Just calculate top and left. We have nothing to study. There are two ways to SetInterval and settimeout. There are a lot of lessons to be learned in the future
