开发学院网页设计 JavaScript Javascript实例代码:固定居中效果阅读

Javascript实例代码:固定居中效果

　2012-04-15 09:19:02　来源：WEB开发网　　　

核心提示： 固定居中，或者固定在任何地方思想几乎是一样的，Javascript实例代码:固定居中效果，只你要算法清楚了，效果写起来就轻而易举了，也很好理解，我在这里就不多说了，先贴代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu

固定居中。或者固定在任何地方思想几乎是一样的。只你要算法清楚了。效果写起来就轻而易举了。先贴代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>固定居中</title>
</head>
<body>
<div id="gd">
        我就在中间随便你们怎么改变窗口大小和高度
</div>
<div style="height:1200px;">
</div>
</body>
</html>

var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
这两句是判断浏览器。这是Aajx里的方法。也很好理解。我在这里就不多说了。大家有兴趣的可以去网上找找了解一下判断各种浏览器。

1 2 3 4 5 6 下一页