富贵资源网 Design By www.hznty.com
其实这个应该不列入JS教程的范畴。应为FF，IE6以上浏览器都支持fixed这个固定属性。唯独IE6不支持。所以我为了可恶的IE6。我这里就出一篇教程吧。而且这种效果也可以锻炼同学们的计算能力。以后很多效果都需要你的计算能力。哈哈
固定居中。或者固定在任何地方思想几乎是一样的。只你要算法清楚了。效果写起来就轻而易举了。先贴代码
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
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这是获取滚动条滚动的高度。
document.documentElement.clientHeight/2整个浏览器高度的一半减去document.getElementById("gd").offsetHeight/2我们dom元素高度的一半。就是我们这个DOM元素要居中所需要距离当前浏览器顶部的top距离。但是这只是个死的高度。因为浏览器的内容不可能正好就是小于等于浏览器当前窗口的高度。内容特别高的时候会出现滚动条。好在我们有document.documentElement.scrollTop也就是我们滚动条滚动的高度。把他加上就是即时dom元素需要居中时候距离当前浏览器顶部的top距离，当然下面那句的算法和这个是一样的，我就不多说了，也让大家自己理解一下，这样印象会深刻一点。
不知道我这样说大家理解没有。这个应该用个图文说明的。不过我觉得我说的应该挺清楚了。大家如果还有点模糊。在纸上画画也就能明白了。
这个距离清楚了的话。现在我们只需要做最后一件事了。就是让滚动条滚动的时候。即时的把这个滚动的高度给加进去。然后把即时的这个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)
这段就是这个作用。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值
好了。这篇就到这里了。这里只是居中。还有什么固定底部拉，固定居左拉等等。道理都是一样的。只是计算top和left不一样而已。大家没事可以自己研究一下。还有setInterval和setTimeout这两个方法。以后出教程会用到很多
固定居中。或者固定在任何地方思想几乎是一样的。只你要算法清楚了。效果写起来就轻而易举了。先贴代码
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
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这是获取滚动条滚动的高度。
document.documentElement.clientHeight/2整个浏览器高度的一半减去document.getElementById("gd").offsetHeight/2我们dom元素高度的一半。就是我们这个DOM元素要居中所需要距离当前浏览器顶部的top距离。但是这只是个死的高度。因为浏览器的内容不可能正好就是小于等于浏览器当前窗口的高度。内容特别高的时候会出现滚动条。好在我们有document.documentElement.scrollTop也就是我们滚动条滚动的高度。把他加上就是即时dom元素需要居中时候距离当前浏览器顶部的top距离，当然下面那句的算法和这个是一样的，我就不多说了，也让大家自己理解一下，这样印象会深刻一点。
不知道我这样说大家理解没有。这个应该用个图文说明的。不过我觉得我说的应该挺清楚了。大家如果还有点模糊。在纸上画画也就能明白了。
这个距离清楚了的话。现在我们只需要做最后一件事了。就是让滚动条滚动的时候。即时的把这个滚动的高度给加进去。然后把即时的这个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)
这段就是这个作用。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值
好了。这篇就到这里了。这里只是居中。还有什么固定底部拉，固定居左拉等等。道理都是一样的。只是计算top和left不一样而已。大家没事可以自己研究一下。还有setInterval和setTimeout这两个方法。以后出教程会用到很多
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。