转自：http://www.cnblogs.com/jailu/archive/2006/10/24/538421.html
一、把以下代码插入<body></body>标签中：
<div id="FloatDIV" style="position: absolute;top: 0px; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid;">
浮动层示例：<br />
<a target="_blank" href="tencent://message/?uin=101535223&Site=http://www.jailusd.com&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:101535223:3" alt="有事您说话"></a>
</div>
二、把以下代码插到</body>标签之后，设置MarginLeft、MarginTop、Width、Heigth四个变量的值
<script language="javascript" type="text/javascript">
var MarginLeft = 30; //浮动层离浏览器右侧的距离
var MarginTop = 50; //浮动层离浏览器顶部的距离
var Width = 120; //浮动层宽度
var Heigth= 45; //浮动层高度
//设置浮动层宽、高
function Set()
{
document.getElementById("FloatDIV").style.width = Width;
document.getElementById("FloatDIV").style.height = Heigth;
}
//实时设置浮动层的位置
function Move()
{
document.getElementById("FloatDIV").style.top = document.documentElement.scrollTop + MarginTop;
document.getElementById("FloatDIV").style.left = document.documentElement.clientWidth - Width - MarginLeft;
setTimeout("Move();",100);
}
Set();
Move();
</script>
经测试，上面的代码在IE中运行通过，但是FireFox里却不好用，查了一下，发现是语法在FF里要求更严格造成的问题，将所有设置宽度长度值的后面加上单位就可以在ff中运行了，如下：
document.getElementById("FloatDIV").style.width = Width + "px";
分享到：
相关推荐
JavaScript中的浮动层（Floating Layer）技术是网页动态效果和交互设计中的重要概念，它允许创建在用户鼠标移动时跟随或响应的元素。这种技术在学习JavaScript时尤其有用，因为它可以帮助理解DOM操作、事件处理和CSS...
综上所述，制作一个JavaScript浮动层在线客服系统，涉及到HTML布局、CSS定位以及JavaScript事件处理等多个技术环节。通过合理的设计和编程，我们可以创建出既美观又实用的在线客服浮动层，提升网站的用户互动性和...
在网页设计和开发中，...总之，“点击弹出浮动层 弹出遮罩层”是网页设计中一个重要的交互元素，通过巧妙的CSS和JavaScript技术可以实现良好的用户体验。开发者应注重细节，确保其在各种场景下都能高效、友好地工作。
首先，关于浮动层菜单的实现，开发者需要准备两个文件：一个是JavaScript文件（DivMenu.js），另一个是CSS样式文件（DivMenu.css）。这两个文件通过简单的引用就可以使得原有的SELECT菜单项被一个更为美观的浮动层...
本资源“JS弹出基于Table的可关闭浮动层.rar”提供了一个使用JavaScript实现的功能，即创建一个基于HTML表格（Table）的可关闭浮动层。这个功能常见于网页中的警告提示、信息窗口或者模态对话框，它可以在用户操作后...
浮动广告(js封装类,javascript,浮动层)
Jquery左右浮动层就是利用JavaScript库Jquery实现的一种动态效果，它可以模拟类似“点击收藏到”的行为，使得用户在不离开当前页面的情况下，能够方便地访问或执行其他操作。下面我们将深入探讨Jquery左右浮动层的...
在网页开发中，实现弹出浮动层的技术有多种，如JavaScript库（如jQuery UI）、框架（如AngularJS或Vue.js）以及专门的插件（如SweetAlert或Bootstrap Modal）。这些工具和库提供了方便的方法来创建、定位和管理浮动...
通过研究这个"基于jQuery精美浮动层效果（JS+CSS）"的源码，开发者不仅能掌握浮动层的实现技巧，还能加深对jQuery和CSS的理解，提升网页交互设计能力。这是一个很好的学习和实践的资源，对于提升前端开发技能...
在这个压缩包文件中，包含了实现这个jQuery精美浮动层效果的所有必要文件，包括HTML、CSS和JavaScript。你可以直接下载并运行这些文件，以此为基础进行进一步的定制和优化。在实际开发中，记得始终关注用户体验，...
javascript实现层固定在浏览器右下角,拖动滚动条不影响其位置. 另外加入Jquery1.7.1js库,用于在固定层上再弹出层的效果. 该代码兼容火狐,谷歌,IE6,7,8浏览器. 说不清楚,总之,此资源用于个人的转储用途,到公司下载用...
浮动JS层，顾名思义，是指在网页中使用JavaScript实现的一种动态效果，使得某些元素能够在用户滚动页面时保持在屏幕的特定位置，通常用于创建固定头部、侧边栏导航或者浮动广告等。这种技术的核心在于理解网页布局、...
摘要:脚本资源,jQuery,弹出层,Js浮动层 基于jQuery的JavaScript浮动层用法实例，实例中演示弹出了宽度为700PX/350PX/500PX的浮动窗口，有了实例，大家用起来就得心应手了，代码中的jQuery，引自google官方的托管库...
在这个特定的案例中，"js浮动弹出层示例"指的是利用JavaScript实现的一种网页元素，它能够在用户进行某些操作时，如点击按钮，从页面上弹出一个浮动窗口。这种浮动窗口通常用于显示警告、提示信息，或者提供额外的...
jQuery，作为一款强大的JavaScript库，简化了DOM操作，使得创建动态和交互式的浮动层变得轻而易举。本文将深入探讨如何利用jQuery和CSS实现一个精美的浮动层效果。 一、jQuery基础 jQuery是JavaScript的一个轻量级...
1. **JavaScript**：JavaScript是实现浮动层动态行为的核心语言。它负责创建、定位、显示和隐藏浮动层，以及处理用户的关闭操作。项目中可能使用了DOM操作（如`document.createElement`、`appendChild`等）来动态...
完整的源码包含了HTML结构、CSS样式和JavaScript逻辑，是学习和理解浮动层实现的宝贵资料。通过阅读和研究这些代码，开发者可以了解如何结合HTML、CSS和jQuery来创建自定义的浮动层，并根据自己的需求进行修改和...
在本案例中，这个浮动层是基于jQuery库的插件——jquery.bubbleScroll.js实现的。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使得开发者可以更高效地创建动态网页。 jQuery....
jQuery作为一款广泛使用的JavaScript库，提供了丰富的插件来简化浮动层的实现，其中就包括我们今天要讨论的“jQuery浮动层插件”。 这个插件因其功能强大、易于使用而备受推崇。它能够帮助开发者轻松创建各种类型的...
对于"jquery弹出左侧隐藏的浮动层"这个主题，我们将探讨如何使用jQuery来实现这样的功能，即在用户触发特定事件时，从页面左侧弹出一个之前隐藏的浮动层。 首先，我们需要在HTML中创建浮动层的基本结构。这个浮动层...