`
- 浏览:
1658143 次
- 性别:
-
-
<!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
>
随滚动条移动的层
</
TITLE
>
-
<
META
HTTP-EQUIV
=
"Content-Type"
CONTENT
=
"text/html"
charset
=
"gb2312"
>
-
<
META
NAME
=
"Author"
CONTENT
=
"haiwa"
>
-
<
META
NAME
=
"homepage"
CONTENT
=
"www.chinaz.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的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
### 随滚动条移动的DIV层：实现与解析 #### 一、概述 在网页设计与开发过程中，为了提高用户体验以及页面的交互性，常常会遇到需要制作一个随滚动条移动的元素（如提示框、广告栏等）。本文将通过分析一段具体的...
### 层随滚动条移动技术解析 #### 技术背景与概述 在Web开发中，实现元素（如层）随着页面滚动条的滚动而移动的效果，可以为用户提供更好的交互体验。这种技术通常被称为“粘性定位”或“固定定位”，但在这里提到...
在网页设计中，"随滚动条移动的层"是一种常见的JavaScript特效，主要用于创建与页面滚动同步的浮动元素，比如侧边栏导航、广告横幅等。这种特效可以使用户在浏览页面时始终保持某些重要信息在视窗可见范围内，提高...
但通过JavaScript和CSS，我们可以实现某些元素不随滚动条移动的效果。 在实现"不随滚动条滚动的层"时，主要的技术步骤包括： 1. **CSS定位**：首先，为要固定的元素设置`position: fixed`，然后指定其`top`、`...
在网页设计中，"随滚动条移动的层"是一种常见的交互效果，通常称为"固定定位"或者"黏性导航"。这种技术可以让某些元素（如导航栏、侧边栏等）在用户滚动页面时始终保持在屏幕的特定位置，提供持续的可访问性，提升...
标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...
在网页设计中，有时我们...总结来说，实现“js固定层不随滚动条滚动”的效果主要涉及JavaScript事件监听、CSS的`position`属性以及对滚动位置的计算。在实际应用中，应考虑兼容性和性能优化，以提供更好的用户体验。
随滚动条移动的层 .div { position: absolute; border: 2px solid red; background-color: #EFEFEF; line-height: 90px; font-size: 12px; z-index: 1000; } ; height:90px" align="center">...
随滚动条移动的5个层(左上、左下、中间、右上、右下)
在ASP.NET中，处理页面随滚动条滑动的层这一需求，通常涉及到JavaScript、CSS和可能的AJAX技术。让我们深入探讨一下这个主题。 首先，我们要理解网页上的层（Layer）是指可以独立于网页其他元素移动或改变大小的...
本项目涉及的知识点是使用jQuery实现一个"scrolltotop"功能，即随着滚动条的移动，显示或隐藏一个返回顶部的按钮，并且具备跳转到页面内指定div的能力。下面将详细阐述这些知识点。 首先，`scroll`事件是浏览器提供...
在这个例子中，我们获取了滚动条的垂直偏移量`scrollTop`，并将其应用到广告元素的top样式上，使得广告元素随滚动条一起移动。这里的"多层浮动效果"可能是指有多个这样的广告层，每个层的浮动行为可能略有不同，比如...
在这个例子中，`#floating-layer`是漂浮层的ID，`scrollTop`变量记录了滚动条的当前位置，然后将其应用于元素的`top`样式，使元素随滚动条移动。 总结起来，"Jquery跟随滚动条漂浮层"涉及到jQuery选择器、事件处理...
在网页设计和开发中，"不随滚动条滚动的模式窗口"是一种常见的用户体验设计技术，它允许用户在当前页面上打开一个全屏或半屏的弹出窗口，而这个窗口不会随着页面的滚动条移动。这种效果常用于图片预览、表单填写、...
1. **漂浮元素**：这里的“漂浮”指的是客服图标或窗口始终固定在屏幕的一侧，无论用户如何滚动页面，它都会保持在可视区域内。这需要用到CSS（层叠样式表）中的`position`属性，通常设置为`fixed`，以便元素相对于...
5. **滚动条的同步**：为了使子窗口内容随滚动条移动，需要重写`OnVScroll`消息处理函数，并根据滚动条的滑块位置更新子窗口的内容。 ```cpp afx_msg void OnVScroll(UINT nSBCode, UINT nPos, CScrollBar* ...
标题中的“随滚动条移动的层特效代码”指的是在网页设计中实现的一种动态效果，它允许页面元素（通常称为“层”或div）随着用户滚动页面时同步移动。这种效果常用于创建各种视觉吸引人的交互体验，比如固定导航栏、...
6. **优化性能**：虽然固定层能提供很好的用户体验，但过度使用可能会对页面性能造成影响，特别是移动设备。因此，合理地使用固定层并优化其CSS代码是必要的。 通过这个插件，Web开发者可以更方便地在Dreamweaver中...
### 知识点二：实现div随滚动条滚动的方法 文件内容中提到了两种实现div随滚动条滚动的方法。一种方法是使用jQuery的`animate`函数，该方法能够创建自定义的动画。通过监听窗口滚动事件（`$(window).scroll()`），当...