`

随着滚动条移动的层

JavaScriptXHTMLHTML 
阅读更多

<!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>

分享到：
| 后退显示 网页过期,解决方案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    简易的jquery层随滚动条移动

    本教程将详细讲解如何使用jQuery实现一个简单的层（div）随滚动条移动的效果。 首先，我们需要理解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...

    层随滚动条移动

    ### 层随滚动条移动技术解析 #### 技术背景与概述 在Web开发中，实现元素（如层）随着页面滚动条的滚动而移动的效果，可以为用户提供更好的交互体验。这种技术通常被称为“粘性定位”或“固定定位”，但在这里提到...

    随滚动条移动的DIV层

    ### 随滚动条移动的DIV层：实现与解析 #### 一、概述 在网页设计与开发过程中，为了提高用户体验以及页面的交互性，常常会遇到需要制作一个随滚动条移动的元素（如提示框、广告栏等）。本文将通过分析一段具体的...

    层跟着滚动条浮动,随着滚动条的移动固定在浏览器顶端不跳动

    标题中的“层跟着滚动条浮动,随着滚动条的移动固定在浏览器顶端不跳动”描述的是网页设计中一种常见的布局技巧，通常被称为“固定定位”（Fixed Positioning）。这种技术可以使网页元素（如导航栏）在用户滚动页面时...

    用CSS实现跟随滚动条漂浮层代码

    总的来说，CSS的`position`属性是实现跟随滚动条漂浮层的关键。通过巧妙地设置`top`、`bottom`、`left`和`right`属性，你可以自由地定制漂浮层在页面上的位置，为用户提供更流畅的浏览体验。在实际项目中，可以结合...

    javascript 实现滚动条滚动到一定距离时显示层

    javascript 实现滚动条滚动到一定距离时显示层 可以兼容全部浏览器。

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...

    随滚动条移动的层.rar

    在网页设计中，"随滚动条移动的层"是一种常见的JavaScript特效，主要用于创建与页面滚动同步的浮动元素，比如侧边栏导航、广告横幅等。这种特效可以使用户在浏览页面时始终保持某些重要信息在视窗可见范围内，提高...

    js固定层不随滚动条滚动图片广告固定层在顶部

    在网页设计中，有时我们需要创建一种效果，使得某些元素如图片广告或导航栏在页面滚动时始终固定在屏幕的特定位置，不会随着滚动条的移动而消失。这种效果被称为“固定层”或“固定定位”。JavaScript（简称js）是...

    随 滚动条 移动 的 层

    在网页设计中，"随滚动条移动的层"是一种常见的交互效果，通常称为"固定定位"或者"黏性导航"。这种技术可以让某些元素（如导航栏、侧边栏等）在用户滚动页面时始终保持在屏幕的特定位置，提供持续的可访问性，提升...

    js 固定位置的层 不随滚动条滚动

    但通过JavaScript和CSS，我们可以实现某些元素不随滚动条移动的效果。 在实现"不随滚动条滚动的层"时，主要的技术步骤包括： 1. **CSS定位**：首先，为要固定的元素设置`position: fixed`，然后指定其`top`、`...

    四种漂亮的滚动条样式

    在网页设计中，滚动条是不可或缺的元素，尤其是在内容超过容器显示范围时。然而，浏览器默认的滚动条样式通常较为简单，与现代网页设计追求的美观和个性化需求有所出入。CSS（层叠样式表）提供了一种方法，允许...

    Jquery跟随滚动条漂浮层

    在这个例子中，`#floating-layer`是漂浮层的ID，`scrollTop`变量记录了滚动条的当前位置，然后将其应用于元素的`top`样式，使元素随滚动条移动。 总结起来，"Jquery跟随滚动条漂浮层"涉及到jQuery选择器、事件处理...

    根据滚动条移动的多层浮动效果，实现页面广告效果。

    同时，我们可以使用JavaScript来改变元素的位置，使其跟随滚动条移动。例如： ```css .floating-ad { position: fixed; top: 0; /* 初始位置 */ width: 200px; /* 自定义宽度 */ height: 200px; /* 自定义高度 ...

    随滚动条移动的5个层(左上、左下、中间、右上、右下)

    随滚动条移动的5个层(左上、左下、中间、右上、右下)

    不随滚动条滚动而滚动的浮动效果

    随滚动条移动的层 .div { position: absolute; border: 2px solid red; background-color: #EFEFEF; line-height: 90px; font-size: 12px; z-index: 1000; } ; height:90px" align="center"&gt;...

    父子窗体滚动条支持鼠标滚轮移动

    描述中的“父子窗体滚动条支持鼠标滚轮移动”意味着开发者已经实现了这样一个功能：当用户在子窗体上使用鼠标滚轮时，不仅子窗体自身的滚动条会移动，而且父窗体的滚动条也会相应地同步滚动。这增加了用户的操作便利...

    弹出层滚动条

    因此，理解响应式设计原则，确保滚动条在移动设备上也能正常工作是至关重要的。 5. **浏览器兼容性**： 不同浏览器对滚动条的支持程度可能有差异，开发者需要测试各种浏览器以确保一致性。有些高级的滚动条样式...

    动态滚动条动态滚动条

    6. **响应式设计**：在移动设备上，屏幕尺寸有限，动态滚动条的设计需要考虑触控操作。设计师需要确保滚动条在不同设备上都能提供良好的用户体验。 7. **滚动性能优化**：大量数据的滚动可能会对页面性能产生影响。...

    jQuery+scrolltotop随滚动条移动的层

    本项目涉及的知识点是使用jQuery实现一个"scrolltotop"功能，即随着滚动条的移动，显示或隐藏一个返回顶部的按钮，并且具备跳转到页面内指定div的能力。下面将详细阐述这些知识点。 首先，`scroll`事件是浏览器提供...

Magicbox
Global site tag (gtag.js) - Google Analytics