<!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;
/*
这两句是判断浏览器。这是Aajx里的方法。也很好理解。我在这里就不多说了。大家有兴趣的可以去网上找找了解一下判断各种浏览器。
* */
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;
/*
document.documentElement.clientHeight这个是获取当前浏览器窗口的高度。
document.getElementById("gd").offsetHeight这是获取我们dom元素的实际高度。
document.documentElement.scrollTop这是获取滚动条滚动的高度。
* */
/*
距离清楚了的话。现在我们只需要做最后一件事了。就是让滚动条滚动的时候。即时的把这个滚动的高度给加进去。
然后把即时的这个t和l值设置到dom的top和left属性中去。这样就能给用户造成个假象。以为这个是固定在那里的。
* */
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
{
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 = "fixed"
document.getElementById("gd").style.top = t + "px";
document.getElementById("gd").style.left = l + "px";
},1)
}
/*
这段就是这个作用。if(isIE6)就是当isIE6这个为真时。也就是当是IE6的浏览器的时候。
setInterval(...,1)这个是设置个时钟让在IE6的浏览器下每隔1微秒执行一下语句。
也就是不断的在更新t和l的值。然后不断的付给DOM元素的top和left属性，1微秒非常快。
用户拉滚动条的速度不可能只需要1微秒的时间。所以用户也就不可能看出来什么。
以为那个就是固定在那里的。当然你也可以设置一个滚动事件windon.onscroll。也可以
。但是我觉得没这种好。大家有兴趣的也可以研究一下（大家别闲我啰嗦，我觉得自己多研究一下东西，比我教大家一大堆东西都有用）。
当然如果不是IE6的浏览器都支持fixed属性。就执行这些语句了。
document.getElementById("gd").style.position = "fixed"//给dom元素加一个fixed属性
document.getElementById("gd").style.top = t + "px";//初始化时给dom元素设置一个居中的t值。
document.getElementById("gd").style.left = l + "px";//初始化时给dom元素设置一个居中的l值
* */
}
</script>
<title>固定居中</title>
</head>
<body>
<div id="gd">
我就在中间随便你们怎么改变窗口大小和高度
</div>
<div style="height:1200px;"></div>
</body>
</html>
分享到：
相关推荐
### JavaScript与jQuery实现大屏滚动播放效果 #### 场景需求 在许多场合下，比如会议、展览或者大型活动上，我们常常会在大屏幕上看到滚动的新闻或信息流。这种实时滚动播报的效果不仅可以吸引观众的注意力，还可以...
jQuery可以简化DOM操作，使动画效果更加流畅，但这个基本的CSS3 Hover效果并不依赖于JavaScript。 总的来说，这个CSS3 Hover图片遮罩文字显示代码是一个实用的网页设计技巧，它可以用于创建吸引人的导航菜单、产品...
本文将深入探讨JavaScript针对DOM的应用，特别关注如何实现固定居中的效果。这个效果在网页设计中十分常见，但IE6浏览器的不兼容性使得实现起来稍有复杂。首先，我们需要了解JavaScript中的DOM（Document Object ...
标题“javascript IE窗口居中”涉及的是在Internet Explorer（IE）浏览器中，使用JavaScript实现弹出窗口自动居中的技术。JavaScript是一种广泛应用于网页和网络应用的脚本语言，它允许开发者在用户与网页交互时动态...
在这个示例中，`$(document).ready`确保了在DOM加载完成后才执行代码。`#myImage`是图片的ID选择器，`#tooltip`是提示框的ID选择器。`.hover()`函数接收两个参数，分别是鼠标进入和离开时的回调函数。`.fadeIn()`和`...
"浏览器窗口放大缩小后页面内容居中解决方法"这一主题，主要涉及JavaScript（js）和jQuery库的使用，以实现动态响应式布局。下面我们将详细探讨如何实现这一目标。 首先，让我们理解窗口的resize事件。当用户调整...
jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画制作，使得创建动态效果更加容易。 总结一下，CSS按钮过渡样式模板涉及到的关键知识点包括：CSS选择器、样式规则、过渡效果（`transition`属性）、...
jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理、动画以及Ajax交互。在这里，我们需要监听按钮的`click`事件，当按钮被点击时触发相应的函数。代码可能如下： ```javascript $(document).ready(function...
在网页设计中，jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。"jquery图片居中放大代码.zip"这个压缩包包含的资源是用于实现一个图片展示功能，当用户鼠标悬停在图片上时，图片...
下面将详细介绍如何使用js-javascript来实现div层的弹出效果。 首先，我们要明白JavaScript（简称JS）是一种轻量级的解释型编程语言，常用于网页和网络应用的客户端脚本。在网页中，JS可以操作DOM（文档对象模型）...
在网页设计中，jQuery是一种广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得诸如DOM操作、事件处理、动画效果等任务变得更为便捷。在本主题“jquery网站列表图片鼠标经过弹出标题效果”中，我们...
将 DOM 元素相对于另一个容器居中 安装 使用安装： $ component install nk-components/dom-center 使用 npm： $ npm i -S nk-dom-center 应用程序接口 中心（目标，容器，渲染器） 目标：将居中的元素。 容器...
4. **兼容性处理**：为了确保代码在不同浏览器中都能正常工作，可能需要使用如jQuery等库进行兼容性处理，或者使用`window.onload`确保所有DOM元素加载完成后再执行JavaScript代码。 5. **样式设计**：通过CSS对弹...
这些功能可以通过JavaScript的DOM操作和AJAX技术来实现。 在压缩包文件`www.youtiy.com`中，可能包含了实现这一功能的HTML、CSS和JavaScript代码文件，以及其他可能的资源文件，如图片、字体等。用户可以下载并查看...
uni-app支持Vue的模版语法，用于描述DOM结构。 **5.2 文本插值** 通过`{{ }}`来展示动态数据。 **5.3 V-BIND指令与属性绑定** 使用`v-bind`指令来绑定属性值。 **5.4 使用JAVASCRIPT表达式** 可以在模版中使用...
jQuery的核心特性包括选择器、DOM操作、事件处理和动画，这些特性使得创建复杂的网页动态效果变得简单。 在JS弹出层和弹出DIV效果中，"showMesBox"可能是这个效果的ID或者类名，用于在页面上定位并控制这个弹出元素...
ASP.NET支持多种JavaScript库，如jQuery，它提供了方便的DOM操作和事件处理函数。若选择jQuery，可以这样实现弹出层的显示： ```javascript <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ...
jQuery，作为JavaScript的一个轻量级库，提供了丰富的API来简化DOM操作，使得创建弹出层变得更为简便。本篇文章将详细介绍一款全手写的非插件jQuery弹出层代码，并探讨其工作原理和应用场景。 首先，让我们了解弹出...
`jQuery`作为一款广泛使用的JavaScript库，提供了强大的DOM操作和事件处理功能，可以帮助我们解决图片尺寸不一致的问题。本篇文章将深入探讨如何使用`jQuery`实现图片的居中裁剪，以达到在不同尺寸的图片上保持视觉...