<!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>code by：haiwa - 随滚动条移动的层 - 中国asp之家 - www.aspxhome.com</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>
分享到：
相关推荐
这里将介绍4种实现div浮层在滚动条移动时保持位置不变的方法。 **方法一：使用CSS绝对定位** 这是最基础的方法，通过CSS的`position: absolute;`属性来实现。当页面滚动时，设置了绝对定位的元素相对于最近的非...
在网页设计中，"DIV滚动悬浮层"是一种常见的交互效果，它使得某个元素（通常是一个包含重要信息或功能的div）在用户滚动页面时始终保持在屏幕的特定位置，提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...
JS弹出DIV浮层.
标题“提示浮层跟随鼠标移动”涉及到的是网页交互设计中的一种常见功能，即动态提示框或者叫气泡提示。这种功能通常用于提供额外的信息或指导，当用户将鼠标悬停在某个元素上时，提示框会出现在鼠标附近，跟随鼠标的...
在网页设计和开发中，"透明浮层DIV"是一个常用的技术，它允许创建一个可交互的、具有透明度效果的浮动元素，常用于弹出窗口、对话框或者自定义控件。下面我们将深入探讨这个主题，包括其原理、实现方法以及浏览器...
如果需要在canvas上进行动态交互，比如点击canvas时检测是否与div重叠，或者让div跟随鼠标移动，我们需要用到JavaScript。例如，可以监听canvas的`mousedown`和`mousemove`事件，然后通过计算鼠标位置与div的位置...
标题中的“浮层的移动”指的是在Web开发中，一种常见的交互设计——浮动元素的动态位置调整。浮层，通常是指那些悬浮在页面主内容之上，用于显示额外信息或者功能的元素，比如提示框、菜单、广告等。当用户进行某些...
本文将详细探讨如何使用 jQuery 实现一个简单的提示浮层，该浮层会跟随鼠标移动。 首先，我们需要了解基本的 HTML 结构。在提供的描述中，我们看到有多个带有鼠标悬停效果的元素，如“把鼠标放到这里1”到“把鼠标...
浮层通常是通过CSS实现定位的，可以设置`position`属性为`absolute`或`fixed`，然后利用`top`、`right`、`bottom`、`left`属性调整位置。浮层的内容可以是HTML元素，如图片、文本或表单。 2. **jQuery浮层插件的...
在这个场景中，“实现div 遮罩 frameset”意味着在`frameset`布局的网页上，使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先，我们来看`frameset`。`frameset`是HTML4中的元素，它允许我们将浏览器窗口划分为...
2. **CSS 样式**：CSS用来控制浮层的样式，包括浮层的透明度、位置、大小，以及图片和导航按钮的布局。使用CSS3的`transition`和`transform`属性，可以实现平滑的动画效果，提升用户体验。 3. **JavaScript 交互**...
position:fixed;实现底层页面不跟随浮层模块滚动
例如，图片可以是一个`<img>`标签，而浮层则可能是一个`<div>`，通过CSS设置其初始为隐藏（`display:none`）。浮层内可以包含要显示的内容，如文本、按钮或其他元素。 ```html <div id="overlay" style="display:...
这个弹出层通常由一个包含新内容的div元素组成，通过CSS设置其透明度、位置和大小，以使其覆盖在原有页面内容之上，形成视觉上的悬浮效果。 在实现浮层（AJAX）弹出层时，有几个关键的技术点需要注意： 1. **Ajax...
3. CSS样式控制：为了实现浮层的美观效果，JavaScript可能会配合CSS来改变浮层的位置、大小、透明度等样式属性。同时，可能还会涉及到CSS的定位（positioning）和过渡效果（transitions）。 4. 数据加载：浮层内容...
解决了网页里在OCX控件之上不能显示层的问题。如果网页里有OCX控件，无论怎么设置z-indexd都无法覆盖在ocx之上。现在已经解决了 用到了1.easyui框架 2.ocx你可以注册你的ocx,替换网页里的CLASSID即可
在移动应用开发中，"实现第一次打开app引导浮层效果" 是一个常见的用户界面设计实践，目的是为了向新用户介绍应用程序的关键功能或交互方式。这种效果通常被称为新手引导或者新手教程，通过展示一系列的提示视图，...
浮层引导页（Floating Guide Page）是应用设计中常见的一种元素，主要用于向用户介绍新功能或引导用户如何使用特定操作。这种页面通常在用户首次打开应用或者更新版本后出现，以提升用户体验并帮助用户快速理解应用...
在本示例中，我们探讨的是一个常见的网页交互功能，即当鼠标移动到某个`div`元素上时，会显示一个浮层（通常称为提示框或气泡提示）来提供更多的详细信息。这个浮层应该与被鼠标悬停的`div`元素的上边距和左边距对齐...