<!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>随滚动条移动的层 - 飘逸online-http://www.ie521.com</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="haiwa">
<META NAME="homepage" CONTENT="www.51windows.net">
</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>
分享到：
相关推荐
本主题主要关注如何使用Ajax来控制div窗口的显示和隐藏，这对于实现交互式用户体验至关重要。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest，它在后台与服务器进行通信，实现了异步数据传输。创建一个...
在本主题中，我们将深入探讨`div`模式窗口的概念、用途、以及如何使用CSS进行样式控制。 1. `div`元素介绍： `div`元素是HTML5中的一个通用容器，它的主要功能是将内容分组，以便应用样式或进行脚本操作。`<div>`...
在本篇中，我们将深入探讨如何使用 `div` 和 `css` 实现模态窗口，并结合 `JavaScript` 进行动态控制。 首先，我们来了解 `div` 元素。`div` 是HTML中的一个通用容器标签，用于组合HTML元素，通过设置 `class` 或 `...
在这个场景中，我们关注的是如何利用JavaScript控制HTML中的`<div>`元素，以及如何实现弹出式窗口的样式。 首先，`<div>`是HTML中的一个通用容器元素，常用于组织页面布局或封装其他元素。在JavaScript中，我们可以...
接下来，我们需要编写JavaScript代码来控制弹出窗口的显示和隐藏。这通常在单独的`<script>`标签内或者外部的JS文件（如`script.js`）中完成。以下是一个简单的JavaScript函数示例： ```javascript function show...
1. **CSS（层叠样式表）**：div弹出窗口的样式主要由CSS控制，包括颜色、字体、边框、背景、定位等。CSS允许开发者精确控制元素的外观和布局，使得弹出窗口不仅功能实用，而且视觉效果出众。 2. **盒模型**：在CSS...
【描述】"DIV制作浮在页面的窗口"主要涉及到的技术包括HTML布局、CSS样式控制以及JavaScript动态效果的实现。`<div>`元素是HTML中的一个块级元素，可以用来组织网页内容，通过CSS我们可以设置其位置、大小、颜色等...
标题 "Div显示小窗口源码" 提供了一个关键线索，那就是我们将在ASP.NET环境中讨论一个用于创建可弹出的小窗口的代码实现。...在实际项目中，这种Div窗口常用于通知用户、显示详细信息、确认操作、登录注册等场景。
在Web开发中，弹出窗口是一种常见的交互设计，用于显示额外的信息或者收集用户输入。传统的弹出窗口可以通过`window.open()`方法实现，但这种方法可能会受到浏览器弹窗阻止程序的影响。因此，利用HTML和CSS结合...
然后在`modal.js`中，我们可以编写JavaScript代码来控制模态窗口的显示和关闭，例如： ```javascript var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); // 假设有一...
在实现过程中，我们可以使用JavaScript的定时器（`setTimeout`或`setInterval`）来控制消息的显示时间，以及使用事件监听来响应用户的关闭操作。此外，为了提高代码的复用性，可以创建一个`TipWindow`类，负责创建、...
创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`fadeIn()`、`fadeOut()`等方法来控制div的可见性，同时通过CSS来定义其样式，如边框、填充、背景色等。以下是一个简单的示例： ```html <div id=...
在Web开发中，弹出窗口通常用于显示警告、确认信息或者进行用户交互。与传统的JavaScript alert、confirm和prompt不同，自定义的弹出窗口通过CSS控制样式，用JavaScript实现交互功能，提供了更高的定制性和用户体验...
**jQuery jBox：仿QQ空间DIV窗口** 在Web开发中，弹出窗口是常见的交互元素，用于显示消息、警告、确认对话框等。jQuery jBox是一个轻量级、可高度定制的插件，用于创建此类浮动窗口。它以其灵活性和与QQ空间弹窗...
在网页设计中，"弹出DIV窗口"是一种常见的交互效果，它允许开发者在不离开当前页面的情况下显示额外的信息或功能。这种技术主要依赖于HTML、CSS以及JavaScript来实现，其中，`DIV`元素是HTML5中的一个块级元素，常...
在网页设计中，有时我们需要将某个`div`元素设置为全屏显示，以提供沉浸式的用户体验或特定功能的实现。JavaScript（简称js）作为一种强大的客户端脚本语言，可以帮助我们轻松实现这一需求。在这个项目中，我们使用...
在网页设计中，模式窗口（Modal Window）是一种常见的交互元素，它可以在用户当前浏览的页面上弹出一个半透明的遮罩层，并显示一个独立的内容区域，用于展示警告、确认对话框或者更多详细信息。本示例是用div元素...
然而，当浏览器窗口缩小或在移动设备上查看时，`div`的宽度和高度可能不足以显示完整的背景图片，尤其是当背景图片尺寸固定且较大时。这就会导致背景图片显示不全，出现视觉上的bug。 解决这个问题的一种方法是使用...
我们还可以通过设置`position`属性为`absolute`或`fixed`来控制其在页面上的位置。 接着，为了实现拖放功能，我们需要监听`mousedown`、`mousemove`和`mouseup`事件。当用户按下鼠标按钮时，记录下初始位置；在鼠标...
`z-index`用于控制在同一堆叠上下文中的定位元素的前后顺序。具有更高`z-index`值的元素会覆盖具有较低`z-index`值的元素。需要注意的是，只有定位元素（`position`不是`static`）才能设置`z-index`。 下面是一个...