<%@ page language="java" pageEncoding="GBK"%>
<%@ include file="../../include/jsp_headers.jsp"%>
<%@ include file="../../include/jsp_headers_nocache.jsp"%>
<%@ include file="../../include/html_headers.jsp"%>
<!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>随滚动条<a href="http://com.chinabyte.com/chinamobile/" class="bluekey" target="_blank">移动</a>的层 - 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>
分享到：
相关推荐
### 随滚动条移动的DIV层：实现与解析 #### 一、概述 在网页设计与开发过程中，为了提高用户体验以及页面的交互性，常常会遇到需要制作一个随滚动条移动的元素（如提示框、广告栏等）。本文将通过分析一段具体的...
标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...
在网页设计中，有时我们需要创建一种...总结起来，通过引入jQuery库，创建层元素，并编写相应的jQuery代码，我们可以轻松实现层随滚动条移动的功能。这种方法简单易用，适用于各种网页设计项目，极大地提高了用户体验。
在网页设计中，"div随滚动条上下滚动"是一种常见的动态效果，通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现，以增加用户体验，使某些元素如导航栏、侧...
div或其他html块内容跟随滚动条移动，滚动移动时，内容跟着移动，并保持最右边
### 层随滚动条移动技术解析 #### 技术背景与概述 在Web开发中，实现元素（如层）随着页面滚动条的滚动而移动的效果，可以为用户提供更好的交互体验。这种技术通常被称为“粘性定位”或“固定定位”，但在这里提到...
随滚动条移动的层 .div { position: absolute; border: 2px solid red; background-color: #EFEFEF; line-height: 90px; font-size: 12px; z-index: 1000; } <div id="Javascript.Div1" class=...
在网页开发中，jQuery是一个非常...总的来说，通过jQuery的`animate()`方法，我们可以轻松地实现div滚动条的动态控制，为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。
在前端开发中，我们常常需要让某个DIV元素固定在页面的某个位置，而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现，特别是使用fixed值。fixed值可以让元素固定在页面的某个位置，而不受滚动条的...
<div id="fixedDiv">我是一个随滚动条移动的div</div> <!-- 填充一些内容以产生滚动 --> 这里是大量的内容…… $(document).ready(function() { var $fixedDiv = $('#fixedDiv'); var initialTop = $...
在处理带有内部滚动条的 `div` 时，我们常常需要实现拖动功能，让用户能够通过鼠标拖动来查看内容，特别是在内容超出 `div` 边界时。这种效果常见于各种自定义滚动条或者数据展示区域的设计。 要实现“拖动div内部...
"div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下，通过CSS样式和JavaScript技术来美化或定制滚动条，使其更加符合现代网页的审美标准和用户体验需求。 首先，我们要了解默认滚动条的样式通常是浏览器...
### 知识点二：实现div随滚动条滚动的方法 文件内容中提到了两种实现div随滚动条滚动的方法。一种方法是使用jQuery的`animate`函数，该方法能够创建自定义的动画。通过监听窗口滚动事件（`$(window).scroll()`），当...
"Jquery跟随滚动条移动的div动画效果"就是一个典型的例子，它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效，而且这个div在移动过程中保持平滑，避免了闪烁现象，提升了用户体验。 首先，...
这种方法的关键在于正确计算滚动距离，确保内容在视觉上平滑移动，同时保持与实际滚动条操作一致的用户体验。 以下是一些关键知识点： 1. **DOM事件监听**：JavaScript可以通过`addEventListener`方法监听DOM元素...
### div随着滚动条滚动，但是到了顶部，便不随着滚动了 #### 背景介绍 在网页设计中，有时我们需要让某个元素（如`<div>`）在页面滚动时保持固定的位置，或者达到特定位置后固定不动。这种效果常用于导航栏、侧边栏...
div 的滚动条问题 div自动添加滚动条，防止div移动位置
本项目涉及的知识点是使用jQuery实现一个"scrolltotop"功能，即随着滚动条的移动，显示或隐藏一个返回顶部的按钮，并且具备跳转到页面内指定div的能力。下面将详细阐述这些知识点。 首先，`scroll`事件是浏览器提供...
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关...
这里将介绍4种实现div浮层在滚动条移动时保持位置不变的方法。 **方法一：使用CSS绝对定位** 这是最基础的方法，通过CSS的`position: absolute;`属性来实现。当页面滚动时，设置了绝对定位的元素相对于最近的非...