<!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>随滚动条移动的层 - 5217.cn</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="flasher">
<META NAME="homepage" CONTENT="www.5217.cn">
</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>
分享到：
相关推荐
网页中的悬浮层是一种常见的网页设计元素，用于在用户浏览页面时提供额外的信息、提示或交互功能。这种设计技术被广泛应用于广告展示、消息提示、表单验证、菜单导航等场景。在本文中，我们将深入探讨如何创建一个...
点击按钮弹出一个悬浮层，出现在中间位置。
在网页设计中，"Div 悬浮层"是一种常见的元素，用于实现类似广告的效果，它通常出现在页面的右下角，并能以动画形式渐渐弹出，吸引用户的注意力。Div是HTML中的一个布局容器，用于组织网页内容，而悬浮层则是通过CSS...
然后，我们可以使用CSS来定义悬浮层的样式，使其始终出现在页面的右下角。这通常涉及到绝对定位（absolute positioning）和CSS的`bottom`和`right`属性。 悬浮层的打开和关闭可以通过点击事件来实现。jQuery提供了`...
JavaScript实现的鼠标悬浮弹出悬浮层效果是一种常见的交互设计，常用于网站的提示信息或功能说明。本示例中，当鼠标悬停在特定的文字（如"警告消息"）上时，会显示一个悬浮层，展示更多的信息。下面将详细解释实现这...
点击按钮弹出悬浮层，层上有数据且可以关闭 页面点击按钮后出现遮罩层，遮罩层上面有其他内容可显示，包含关闭遮罩层按钮。 需要显示详情，但是不想从新写一个页面。所以选择弹出层，一层遮罩层，一层显示详情层，...
【jQuery仿Discuz右下角悬浮层提示】是一种常见的网页交互设计，用于向用户显示重要的通知、消息或者提示信息。这种设计通常出现在页面的右下角，不会干扰用户的主要操作，同时又能确保用户能注意到这些信息。在网页...
4. **JavaScript交互**：JavaScript用于增强用户体验，例如，当用户点击悬浮按钮时，可以弹出或隐藏聊天窗口。此外，JS还可以实现动态加载QQ在线客服的iframe，以确保其加载速度和用户隐私。 5. **iframe集成**：QQ...
"jQuery 悬浮导航栏"是一种常见的网页交互效果，当用户滚动页面时，导航栏会固定在屏幕顶部，始终保持可见，提供便捷的导航。在本篇文章中，我们将深入探讨如何使用 jQuery 实现这一功能，以及其背后的原理和技术...
- 将悬浮层放置于layout.jsp中，利用tiles框架统一管理页面布局，确保网站中所有页面的布局都能继承自layout.jsp，以保证悬浮层可以在整个网站中统一显示。 #### 其他相关知识点 - **JSP标签语法**：JSP中的标签...
在网页设计中，图片的标注和悬浮层提示是常见的交互元素，可以为用户提供额外的信息或指导。本资源“jquery css3图片标注悬浮层提示效果代码”提供了一种使用jQuery和CSS3实现的方法，来创建动态、美观的图片标注和...
弹出层通常是指在网页或应用程序主界面之上显示的临时窗口，它们不会改变原有页面的内容，而是悬浮在上面，以突出显示重要的信息或功能。对话框则是一种特殊的弹出层，用于与用户进行交互，如确认操作、输入数据等。...
6. **Z-index管理**：确保弹出层的`z-index`值高于页面其他元素，以便它出现在最前面。`z-index`是一个整数值，数值越大，元素越靠前。 7. **防止遮挡**：如果弹出层的内容被其他元素遮挡，可以检查是否正确设置了`...
总之，jQuery弹出层提供了一种方便、灵活的方式来增强网页的交互性。通过理解其核心原理和应用场景，开发者可以创建出满足各种需求的弹出层功能，提升网站的用户体验。在实际项目中，我们应结合具体需求，选择合适的...
在JavaScript中，可能还需要动态调整某些元素的样式，以达到动画效果，比如在悬浮层出现或消失时添加过渡（transition）。 在压缩包“texiao7171_1560680813”中，通常包含了这个项目的源代码文件，包括HTML文件...
在网页设计中，"悬浮层div"是一种常见的交互设计元素，它主要用于提供额外的信息或功能，当用户将鼠标悬停在某个元素上时，该div会像浮现在页面上一样出现。这种效果可以用于提示、菜单、广告或其他交互式内容。下面...
在网页设计中，"悬浮DIV弹出窗体实现登录"是一种常见的交互设计手法，它能够为用户提供更加便捷和美观的登录体验。这种设计通常将登录表单以浮动窗口的形式展示，用户无需离开当前页面就可以完成登录操作，提升了...
4. **动画效果**：为了提供更好的用户体验，弹出层的出现和消失往往伴随着过渡动画。这可以通过CSS3的transition或jQuery的animate方法实现。 5. **关闭机制**：弹出层通常有一个关闭按钮或者点击外部区域自动关闭...
在Xamarin.Android应用开发中，有时我们需要实现一种特殊的效果，即在主页面上弹出一个悬浮框，并且这个悬浮框的背景是半透明的，以此达到遮挡底层内容但又能透出部分背景的效果。这样的设计可以用于显示提示信息、...