<!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>随滚动条移动的层 - 51windows.Net</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>
分享到：
相关推荐
"Jquery跟随滚动条移动的div动画效果"就是一个典型的例子，它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效，而且这个div在移动过程中保持平滑，避免了闪烁现象，提升了用户体验。 首先，...
在本项目中，我们主要探讨的是如何利用CSS3和HTML5技术实现一个全屏焦点图片展示效果，其中图片能够随着鼠标的移动而平滑地移动，同时无滚动条设计使得用户体验更加流畅。以下是对这个主题的详细解释： 一、全屏...
这种实现通过编程的方式来处理 IE6 下跟随滚动条移动的问题：它利用了 hack 写法 `_position:absolute;` 在 onscroll 事件中设置目标的位置；而在 IE6 以上版本或者其它 Firefox, Chrome, Safari, Opera 浏览器下，...
6. **腾讯QQ网页在线客服，随网页滚动条上下移动的效果**：这是典型的固定定位（fixed positioning）应用，通过CSS确保元素始终在屏幕的特定位置，即使用户滚动页面也不受影响。此效果可以提高在线客服的可见性和...
标题中的“随滚动条移动的层特效代码”指的是在网页设计中实现的一种动态效果，它允许页面元素（通常称为“层”或div）随着用户滚动页面时同步移动。这种效果常用于创建各种视觉吸引人的交互体验，比如固定导航栏、...
"带滚动条拖动图片特效"是一个专为ASP.NET平台设计的功能，它旨在提升用户体验，让用户可以方便地通过滚动条浏览和拖动图片，营造出动态、交互式的视觉效果。这个特效特别适用于那些拥有大量图片资源，需要在一个...
在这个特效中，JS代码会监听滚动条的移动事件，并根据事件触发相应的处理函数，实现文字的平滑滚动。滚动条的自定义通常涉及到CSS（层叠样式表）的使用，通过修改滚动条的样式来改变其外观，使其与网站的整体设计...
1. **嵌套原理**：一个AP DIV的代码位于另一个AP DIV代码内部，嵌套的层会随父层移动并继承其可见性。 2. **嵌套方法**：在父层内插入新的AP DIV，可以通过拖动或使用“绘制AP Div”工具。 3. **辅助线与标尺**：...
例如，可以使用JavaScript实现网页元素的动态显示和隐藏、表单验证、时间日期显示、页面跳转、滚动条特效等。例如，`addEventListener`函数用于监听事件，`document.getElementById`用于获取HTML元素，`style`属性则...
这个功能是通过使用jQuery插件mCustomScrollbar来完成的，它为网站提供了丰富的自定义滚动条效果，并且能够适应各种设备，包括移动设备，支持响应式布局。 首先，我们需要了解jQuery库。jQuery是一个广泛使用的...
【标题】"基于jQuery实现的随滚动条增减的汽水瓶中的液体" 这个项目是利用JavaScript库jQuery来创建一个动态效果，它模拟了汽水瓶中的液体随着页面滚动条的移动而增减的视觉效果。这个效果通常用于增强用户体验，使...
3. **滚动(Scroll)**：滚动是网页元素动态移动的效果，通常由用户操作（例如，滚动条）或由JavaScript自动触发。在此特效中，滚动是自动且连续的。 4. **JavaScript(Javascript)**：JavaScript是网页开发中的核心...
2、网页左侧实现带关闭按钮、随滚动条上下移动的广告层 3、随机漂浮的图片广告 4、向上、向左滚动的信息（利用marquee跑马灯实现） 5、最热招聘（本页内链接） 6、页面打开时，弹出广告窗口 7、二级的横向菜单，...
在这个"jQuery网页上下滚动背景变色特效.zip"压缩包中，包含了一个使用jQuery实现的网页背景颜色随滚动条移动而变化的特效。这个特效可以增强用户体验，为网站增添动态感。 首先，我们来了解一下jQuery的核心概念。...
### 腾讯QQ网页在线客服随网页滚动条上下移动的效果解析 #### 一、概述 在当前互联网时代，为了更好地提升用户体验与服务质量，许多网站都加入了在线客服系统。腾讯QQ网页在线客服作为其中的一种典型应用，通过...
实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...
jQuery OnePageScroll.js 是一个专为此目的而设计的插件，它允许开发者轻松实现这种“视差滚动”效果，即页面随着用户的鼠标滚动，各个部分以不同的速度移动，从而营造出深度感和动态视觉体验。 **一、插件功能与...
- 否则，每次调用该函数时，使滚动条向右移动一个像素。 4. **定时器设置与控制**: ```javascript var MyMar = setInterval(Marquee, speed3); demo.onmouseover = function () { clearInterval(MyMar) }; ...
这种特效使得信息的呈现更加直观、吸引人，通过横向布局和滚动条切换，为用户提供了良好的浏览体验。 时间轴特效的核心在于JavaScript的DOM（文档对象模型）操作，它允许开发者动态修改HTML元素和CSS样式，从而创建...
**jQuery内容区自定义滚动条插件特效代码详解** 在网页设计中，滚动条作为页面内容超出可视区域时的重要导航工具，其外观和交互性往往影响着用户体验。jQuery提供了丰富的插件来帮助开发者定制滚动条样式，使得滚动...