<!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/
<!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>
<TITLE>随滚动条移动的层 </TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
</HEAD>
<style>
<!--
.div{
position: absolute;
border: 2px solid red;
background-color: #EFEFEF;
line-height:90px;
font-size:12px;
z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
</SCRIPT>
<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>
<div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>
<div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
</SCRIPT>
<div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
sc1();sc2();sc3();sc4();sc5();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"></div>
</BODY>
</HTML>
notice: I was copied from here:http://www.jb51.net/article/26525.htm
Thanks
相关推荐
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
HTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS...
HTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML...
html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示，可以根据窗口的大小自动调节所显示的大小！ DIV+CSS+JS静态分页程序可兼容主流浏览器（IE、FF、Opera） DIV+CSS表格...
在上面的代码中，我们将autoHeight和autoWidth函数绑定到窗口的resize事件上，以便在窗口大小变化时更新DIV层的高度和宽度。 七、总结 在本文中，我们学习了使用JS+CSS来实现DIV层自适应高度和宽度的技术。我们...
【标题】"html+css+js+div布局.zip"是一个包含HTML、CSS和JavaScript技术的网页布局示例，特别适合初学者学习。这个压缩包旨在教授如何使用这些基础技术来构建一个具有图片轮播功能的网页。 【描述】中提到，这个...
【JS+CSS+div内容图片轮播特效】是一种常见的网页动态效果，用于展示一组图片或内容，通过平滑过渡在不同图片之间切换，为用户提供视觉上的吸引力和交互性。在这个项目中，`div`作为主要的容器元素，`CSS`用于布局和...
HTML+CSS+Div 学习实例教程是网页设计领域中不可或缺的一部分，这三种技术共同构成了网页的静态结构和样式。本教程将深入探讨如何利用它们来创建高效、响应式的网页设计。 HTML（HyperText Markup Language）是网页...
本资源"精美css+div网站实例源码"提供了四个不同样式的网站源码，分别是lotusflower、gumamela、CleanandBlue和fotolandia，非常适合初学者和有经验的开发者学习和参考。 1. **CSS布局**: 这些源码实例展示了如何...
html+js+css的代码资料.ziphtml+js+css的代码资料.ziphtml+js+css的代码资料.ziphtml+js+css的代码资料.ziphtml+js+css的代码资料.ziphtml+js+css的代码资料.ziphtml+js+css的代码资料.ziphtml+js+css的代码资料....
综上所述，这个压缩包提供的是一套基于Web标准的、使用<div>和CSS进行布局和样式的网页设计模板集合，涵盖了基本页面、博客、表格、笔记和表单等多种场景。通过学习和应用这些实例，开发者可以提升其在网页布局和...
【描述】提到的"css+div 的入门教程"，暗示了该资源可能包含一系列关于如何使用 `div` 元素配合 `CSS` 进行网页设计和布局的教学内容。`div` 作为网页布局的基本构建块，常通过 `CSS` 设置样式属性，如宽度、高度、...
通过CSS，开发者可以控制字体、颜色、间距、布局和响应式设计，使网页在不同设备上呈现出一致且美观的视觉效果。CSS3带来了许多新的选择器、动画、过渡和3D变换等功能，极大地提高了网页的交互性和表现力。 DIV是一...
在网页开发领域，HTML、CSS、DIV和JS是构建动态、交互式网站的四大核心技术。以下是对这些技术的详细说明和编程技巧。 1. HTML（HyperText Markup Language）： HTML是网页的基础，用于定义页面结构。它由一系列...
《div+css手册》是一本深入探讨网页布局技术的重要参考资料，尤其对于网页设计者和前端开发者来说，它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS（层叠样式表）的结合使用上，旨在帮助读者...