JavaScript Instance code: Fixed Center effect

Source: Internet
Author: User
Tags add setinterval window

Article Introduction: Finally, I can spare some time for another tutorial. There's no more nonsense to say. Today this article teaches everybody a commonly used effect. Fixed center effect. In fact, this should not be included in the JS Tutorial category.

Finally, I can spare some time for another tutorial. There's no more nonsense to say. Today this article teaches everybody a commonly used effect. Fixed center effect. 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 ">
<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>
<body>
<div id= "GD" >
I'm right in the middle. How do you change the window size and height
</div>
<div style= "height:1200px;" >
</div>
</body>

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.clientHeightThis is the height that gets the current browser window.
document.getElementById ("GD"). OffsetheightThis is the actual height of getting our DOM elements.
Document.documentElement.scrollTopThis is the height that gets the scroll bar scrolling.

DOCUMENT.DOCUMENTELEMENT.CLIENTHEIGHT/2half of the entire browser's height minusdocument.getElementById ("GD"). OFFSETHEIGHT/2half the height of our DOM elements. 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 haveDocument.documentElement.scrollTopthat's 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.
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(Don't be idle, I think I do more research, 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";Sets a centered T value on the DOM element when initializing.
document.getElementById ("GD"). Style.left = L + "px";To set a centered L value on the DOM element when initializing

all right, now. 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



Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.