<!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>随滚动条移动的层 - webjx.com</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="flasher">
<META NAME="homepage" CONTENT="www.webjx.com">
</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选择器隐藏浏览器默认的滚动条。例如，对于水平滚动条，可以使用如下代码： ```css body { overflow-x: hidden; } ``` 如果需要在某些特定情况下显示滚动条，可以使用伪元素`::-...
这种实现通过编程的方式来处理 IE6 下跟随滚动条移动的问题：它利用了 hack 写法 `_position:absolute;` 在 onscroll 事件中设置目标的位置；而在 IE6 以上版本或者其它 Firefox, Chrome, Safari, Opera 浏览器下，...
6. **腾讯QQ网页在线客服，随网页滚动条上下移动的效果**：这是典型的固定定位（fixed positioning）应用，通过CSS确保元素始终在屏幕的特定位置，即使用户滚动页面也不受影响。此效果可以提高在线客服的可见性和...
在这个特效中，JS代码会监听滚动条的移动事件，并根据事件触发相应的处理函数，实现文字的平滑滚动。滚动条的自定义通常涉及到CSS（层叠样式表）的使用，通过修改滚动条的样式来改变其外观，使其与网站的整体设计...
例如，可以使用JavaScript实现网页元素的动态显示和隐藏、表单验证、时间日期显示、页面跳转、滚动条特效等。例如，`addEventListener`函数用于监听事件，`document.getElementById`用于获取HTML元素，`style`属性则...
3. **滚动(Scroll)**：滚动是网页元素动态移动的效果，通常由用户操作（例如，滚动条）或由JavaScript自动触发。在此特效中，滚动是自动且连续的。 4. **JavaScript(Javascript)**：JavaScript是网页开发中的核心...
【标题】"基于jQuery实现的随滚动条增减的汽水瓶中的液体" 这个项目是利用JavaScript库jQuery来创建一个动态效果，它模拟了汽水瓶中的液体随着页面滚动条的移动而增减的视觉效果。这个效果通常用于增强用户体验，使...
实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...
在网页设计中，JavaScript特效为用户提供更丰富的视觉体验，其中字符滚动隐现效果是常见的一种，用于吸引用户的注意力或者展示大量信息。本项目名为"javascript经典特效---字符滚动隐现效果.rar"，包含一个名为"字符...
- 否则，每次调用该函数时，使滚动条向右移动一个像素。 4. **定时器设置与控制**: ```javascript var MyMar = setInterval(Marquee, speed3); demo.onmouseover = function () { clearInterval(MyMar) }; ...
本文将深入探讨如何利用这两个工具来实现内容滚动条的拖拽滑动解锁效果，以及触摸轮播图等特效。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。通过使用jQuery，开发者...
jQuery OnePageScroll.js 是一个专为此目的而设计的插件，它允许开发者轻松实现这种“视差滚动”效果，即页面随着用户的鼠标滚动，各个部分以不同的速度移动，从而营造出深度感和动态视觉体验。 **一、插件功能与...
标题中的“HTML 页面滚动时背景图片不会移动”指的是在网页设计中实现的一个特效，即当用户滚动页面内容时，背景图片的位置保持不变，营造出一种固定背景或视差滚动的效果。这种效果通常通过CSS（层叠样式表）来实现...
4. **计算滚动距离**：在滚动事件处理函数中，获取滚动条的当前位置，然后根据这个值调整云朵的位置。这通常是通过修改云朵div的CSS的`transform`属性完成的，比如`translateY`。 5. **速度差异**：为了创建视觉差...
在网页设计中，jQuery是一种广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得诸如动画效果、事件处理和DOM操作等任务变得更加便捷。在这个"jquery图片横向滚动特效"的主题中，我们将深入探讨如何...
6. **动态层（Div）**：层（Div）是网页布局的重要元素，JavaScript可以控制Div的显示、隐藏、移动和大小变化，实现滑动门、淡入淡出、拖拽等效果。理解如何操作DOM元素，特别是Div，对于创建交互式界面至关重要。 ...
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...
41.jquery拖动滚动条控制图片滚动及图片放大特效的示例 42.jquery旋转式图片切换并带图片放大功能 43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...