var alLeft = 0, alCenter = 1, alRight = 2; //水平对齐方式
var alTop = 0, alMiddle = 1, alBottom = 2; //垂直对齐方式
var f = new Array();
var cnt = 0;
function floatDiv(objId, align, vAlign, x, y, smooth)
{
/*浮动块对象
数据结构:
objId:对象ID
align:水平对齐方式,枚举型
vAlign:垂直对齐方式,枚举型内容
x, y: xy座标,整型
smooth:平滑移动,布尔型
*/
this.objId = objId;
this.align = align;
this.vAlign = vAlign;
this.x = x;
this.y = y;
this.smooth = smooth;
}
function addDiv(objId, align, vAlign, x, y, smooth)
{ //添加浮动块
f[cnt++] = new floatDiv(objId, align, vAlign, x, y, smooth);
}
function floatMove()
{ //重新定位各块位置
var objX, objY;
if (document.all)
{
var d = document.body;
//status = "scrollLeft:"+f[0].objId.style.pixelTop+"| offsetWidth:"+d.offsetWidth;
for (var i=0; i<f.length; i++)
{
switch (f[i].align)
{
case alLeft : objX = d.scrollLeft + f[i].x; break;
case alCenter: objX = d.scrollLeft + Math.ceil((d.offsetWidth - f[i].objId.offsetWidth)/2) + f[i].x; break;
case alRight : objX = d.scrollLeft + d.offsetWidth - f[i].x - f[i].objId.offsetWidth - 20; break; //减滚动条20
}
switch (f[i].vAlign)
{
case alTop : objY = d.scrollTop + f[i].y; break;
case alMiddle: objY = d.scrollTop + Math.ceil((d.offsetHeight - f[i].objId.offsetHeight)/2) + f[i].y; break;
case alBottom: objY = d.scrollTop + d.offsetHeight - f[i].y - f[i].objId.offsetHeight; break;
}
if (f[i].smooth) smoothMove(f[i].objId, objX, objY);
else
{
f[i].objId.style.pixelLeft = objX;
f[i].objId.style.pixelTop = objY;
}
}
}
if (document.layers)
{
for (var i=0; i<f.length; i++)
{
var objId = f[i].objId;
switch (f[i].align)
{
case alLeft : objX = pageXOffset + f[i].x; break;
case alCenter: objX = pageXOffset + Math.ceil((window.innerWidth-objId.width)/2) + f[i].x; break;
case alRight : objX = pageXOffset + window.innerWidth - f[i].x - document.objId.width; break;
}
switch (f[i].vAlign)
{
case alTop : objY = pageYOffset + f[i].y; break;
case alMiddle: objY = pageYOffset + Math.ceil(window.innerHeight/2) + f[i].y; break;
case alBottom: objY = pageYOffset + window.innerHeight - f[i].y - document.objId.height; break;
}
if (t[i].smooth) smoothMove(f[i].objId, objX, objY);
else
{
document.objId.left = objX;
document.objId.top = objY;
}
}
}
setTimeout("floatMove();",50);
}
function smoothMove(obj, x, y)
{
var percent;
if (document.all)
{
percent = .1 * (x - obj.style.pixelLeft);
if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
obj.style.pixelLeft += percent;
percent = .1 * (y - obj.style.pixelTop);
if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
obj.style.pixelTop += percent;
}
if (document.layers)
{
percent = .1 * (x - document.objId.left);
if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
document.objId.left += percent;
percent = .1 * (y - document.objId.top);
if (percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent);
document.objId.top += percent;
}
}
setTimeout("floatMove();",50);
调用例子:
<script language="javascript" ></script>
<script language="javascript">
if (navigator.appName == "Netscape")
{
document.write("<layer top=300 width=100 height=120><a href=http://www.fpc.org.cn/hr/040522.htm target=_blank><img src='ad/hr40522.gif' width=120 height=180 border=0></a></layer>");
}
else
{
document.write("<div style=';width:120;top:300;left:5;visibility: visible;z-index: 1'><a href=http://www.fpc.org.cn/hr/040522.htm target=_blank><img src='ad/hr40522.gif' width=120 height=180 border=0></a></div>");
}
addDiv(ad_hr, alRight, alTop, 0, 30, true);
</script>
分享到:
相关推荐
这种效果通常应用于需要显示详细信息、模态对话框或菜单等场景,用户点击某一元素后,一个半透明的遮罩层会覆盖整个页面,同时一个浮动层(通常包含更多信息或功能)在屏幕中央出现。以下是对这个主题的详细解释: ...
在网页设计中,浮动层是一种常见的交互元素,用于提供弹出信息、提示或者导航功能。Jquery左右浮动层就是利用JavaScript库Jquery实现的一种动态效果,它可以模拟类似“点击收藏到”的行为,使得用户在不离开当前页面...
JavaScript中的浮动层(Floating Layer)技术是网页动态效果和交互设计中的重要概念,它允许创建在用户鼠标移动时跟随或响应的元素。这种技术在学习JavaScript时尤其有用,因为它可以帮助理解DOM操作、事件处理和CSS...
本教程将详细讲解如何利用jQuery实现一个精美的浮动层效果,这种效果通常用于创建弹出窗口、提示框或信息提示。 首先,我们需要理解浮动层的基本概念。浮动层,也称为浮动对话框或浮窗,是一种在网页上显示临时信息...
标题“弹出浮动层”指的是在用户界面上创建一种可浮动、可交互的窗口或对话框,这种元素通常用于提示信息、展示详细内容或者进行特定操作。在IT领域,浮动层设计是用户体验(UX)和界面设计(UI)中的一个重要组成...
【jQuery精美浮动层效果详解】 在网页设计中,浮动层是一种常见的交互元素,它能够吸引用户的注意力,提供信息提示或者进行交互操作。本资源提供的"基于jQuery精美浮动层效果(JS+CSS)"是一个完整的源码示例,可以...
对于"jquery弹出左侧隐藏的浮动层"这个主题,我们将探讨如何使用jQuery来实现这样的功能,即在用户触发特定事件时,从页面左侧弹出一个之前隐藏的浮动层。 首先,我们需要在HTML中创建浮动层的基本结构。这个浮动层...
本资源提供了四个基于jQuery实现的`div`浮动层,这些浮动层不仅功能实用,而且设计优美,可以极大地提升用户体验。 1. **jQuery基础** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画...
在网页设计中,浮动层是一种常见的交互元素,它可以在用户移动鼠标时跟随鼠标的位置进行动态显示,常用于提示信息、广告展示或者下拉菜单等。本篇将详细讲解如何使用jQuery来实现这样的功能。 首先,我们需要理解...
在网页开发中,创建一个兼容各种浏览器的可关闭浮动层是一项常见的需求,它可以在页面上显示重要的消息、提示或者广告,同时允许用户根据需要关闭它。这个“兼容各种浏览器的可关闭的浮动层”项目正是为了解决这个...
5. 定位浮动层:根据需求,可以使用CSS的`position`属性(如`absolute`或`fixed`)和`top`、`left`等属性来控制浮动层在屏幕上的位置。 6. 动态调整:考虑到不同屏幕尺寸和设备,可能需要实现响应式设计,使浮动层...
在这个特定的场景中,我们讨论的是如何使用JavaScript来创建一个“浮动层”或者叫“float浮动层”,通常是为了实现在线客服功能,让用户在浏览网站时能方便地与客服人员进行交流。 首先,我们要理解浮动层的概念。...
在实际应用中,开发者可以根据需求自定义浮动层的内容和样式,比如改变其颜色、大小、位置等,同时也可以调整触发浮动层显示的滚动距离,以适应不同网页的布局和设计。此外,通过调整jQuery代码,还可以扩展其功能,...
在IT行业中,jQuery是一种广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本教程将详细讲解如何...在实际项目中,可以根据需求自定义浮动层的内容和样式,以满足各种应用场景。
在网页设计中,"仿CSDN鼠标移上去的显示DIV浮动层"是一种常见的交互设计技术,主要用于增强用户体验,提供更多的信息提示。这种效果常见于文章列表、菜单栏或者按钮等元素,当用户将鼠标悬停在某个元素上时,会有一...
"弹出登录框的JQuery弹出浮动层"就是一种常见的交互设计手法,它允许用户在不离开当前页面的情况下进行登录操作,提高了用户体验。JQuery,一个强大的JavaScript库,使得实现这样的功能变得更加简单。接下来,我们将...
"弹出浮动层漂亮登录框 Jquery" 是一种常见的实现方式,它结合了JavaScript库Jquery的优势,为用户提供了一种优雅、直观且易于使用的登录界面。这种设计可以提高网站的可用性,同时保持页面的整洁和美观。 Jquery ...
标题中的“jQuery做浮动层/浮动广告/漂浮”指的是使用jQuery这个JavaScript库来实现页面上的元素(通常为广告)保持在用户滚动页面时始终可见的效果。这种技术常见于网页设计中,用来吸引用户的注意力或者提供重要的...
"纯CSS3鼠标点击图片叠加浮动层注释信息"这一主题涉及到的技术点主要包括CSS3的选择器、过渡效果、伪类以及相对定位等。 首先,我们需要理解CSS3中的选择器。选择器是CSS3中用来指定需要应用样式的HTML元素的方式。...
**jQuery浮动层插件详解** 在网页开发中,浮动层(通常称为弹窗或对话框)是一种常见的交互设计元素,用于展示重要的信息、提示、表单或者任何需要用户注意的内容。jQuery作为一款广泛使用的JavaScript库,提供了...