<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
//当页面被流动的时候调用些方法
function onScroll(){
var top = (document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop : document.body.scrollTop;
var floatDiv = document.getElementById("floatDiv");
folatDiv.style.position = "absolute";
folatDiv.style.top = top+"px";
}
window.onscroll = onScroll;
</script>
</HEAD>
<BODY>
<table>
<tr>
<td width="200px">
<div id="folatDiv" style="position:absolute;top:0px"><font color='red' size='6'>测试</font></div>
</td>
<td width="200px">
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
<p>呵呵</p>
</td>
</tr>
</table>
</BODY>
</HTML>
分享到：
相关推荐
这个简单的例子展示了如何使用jQuery和CSS实现一个基础的浮动层效果。在实际应用中，你可能需要根据项目需求调整样式、添加动画效果或者限制浮动层的移动范围。同时，注意性能优化，避免在大范围或频繁的`mousemove`...
本主题将深入探讨如何使用jQuery实现一个可拖动并可固定在页面上的浮动DIV元素。 首先，让我们理解“浮动DIV”。在HTML中，浮动（float）属性常用于布局，使元素可以向左或向右移动，以便其他内容可以环绕它。在CSS...
总结来说，该知识点介绍了一个简单的JavaScript实现div向上浮动效果的方法。通过HTML、CSS和JavaScript的结合使用，实现了一个具有交互性的动画效果。这不仅涉及到了基本的DOM操作，也包括了事件监听和定时器的使用...
jQuery库提供了一种简单且高效的方式来实现这种效果。本篇文章将详细探讨如何使用jQuery来实现一个浮动菜单，并在鼠标离开时自动关闭的功能。 首先，我们需要了解jQuery的基本概念。jQuery是一个轻量级、功能丰富的...
原生JavaScript（不依赖于任何库如jQuery）制作的浮动div层拖动叠加效果，是一种增强用户体验的技术，使得用户可以通过鼠标拖动来改变div层的位置，实现动态交互。本篇文章将详细介绍如何利用JavaScript实现这一功能...
【jQuery实现div浮动层跟随页面滚动效果】 在网页设计中，有时我们需要创建一种效果，使得某个div元素（如广告栏、导航菜单等）在用户滚动页面时始终保持在屏幕的特定位置，这种效果被称为浮动层或漂浮层。jQuery库...
实现浮动div的拖动** 首先，确保在项目中引入jQuery库和jQuery UI的相关文件，包括`jquery.js`，`jquery-ui.js`以及主题CSS文件。接下来，选中需要拖动的div元素，应用`.draggable()`方法： ```html <div id=...
结合`frameset`和`div`，我们可以创建一个在框架集页面上浮动的弹出层。例如，我们可以将弹出层定位到特定的框架内，或者让它覆盖整个框架集。这需要通过JavaScript获取框架的位置和大小，然后相应地调整`div`的样式...
在这个JavaScript实现的网页实例中，主要展示了如何使用HTML、CSS和JavaScript来创建一个浮动在页面顶部并且带有关闭按钮的div元素。这个功能通常用于创建工具提示、通知栏或者广告条等，以提供一种非侵入性的用户...
下面是一个简单的HTML和CSS示例来实现这个效果： ```html <!DOCTYPE html> .sticky { position: fixed; /* 设置为fixed */ top: 0; /* 确保div始终在顶部 */ width: 100%; /* 可以根据需要设置宽度 */ ...
通过CSS的`position`属性，我们可以将`div`设置为浮动（例如`position: fixed`或`position: absolute`），使其不随页面滚动而移动，从而实现悬浮效果。这样的设计常用于侧边栏、固定导航栏或者像登录窗体这样的弹出...
1. **基本布局**：使用Div实现网格系统，例如两栏或三栏布局，展示如何通过CSS浮动（float）和清除（clear）控制元素的位置。 2. **定位**：通过CSS的position属性（static、relative、absolute、fixed）来精确控制...
1. **Float布局**：设置`float: left`或`float: right`可以使Div元素向左或向右浮动，从而实现并排显示。但需要注意清除浮动（`clear:both`）以防止父元素高度塌陷。 2. **Flex布局**：使用`flex-direction: row`，...
在网页设计中，有时我们需要实现一个功能：当用户将鼠标悬停在某个div元素上时，显示特定的信息或另一个div。这个功能可以增强用户体验，帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能，并确保...
本篇文章将详细讲述如何使用jQuery实现一个浮动层（Div）在浏览器中居中显示的效果。 首先，我们需要在HTML页面的`<head>`部分引入jQuery库。在文档中，我们通过`<script>`标签引入了jQuery的压缩版本（`jquery-...
在网页设计中，"右侧固定浮动板块"是一种...这个简单的例子展示了jQuery如何增强网页交互性，通过几行代码就能实现复杂的效果。在实际项目中，你可以根据需要调整CSS样式和JavaScript逻辑，以适应不同场景下的需求。
但鉴于本题要求的三行两列布局相对简单，使用浮动或Flexbox已经足够。 在实际应用中，我们需要根据具体需求调整样式，比如添加背景色、调整字体、响应式设计等。响应式设计意味着布局会根据设备屏幕尺寸自动调整，...
- 现代浏览器支持Flexbox（弹性盒子布局），这是一种更强大的布局模式，允许更简单地创建响应式、灵活的Div布局，包括对齐、分配空间和调整顺序。 6. **Grid布局**： - CSS Grid布局提供了一种二维布局系统，特别...