您的位置:首页 > 运维架构 > 网站架构

利用脚本封装,方便实现网站悬浮广告

2004-07-06 15:07 513 查看
下面是JS脚本(floatdiv.js)

/*======================================================================
浮动块支持脚本
DESIGN BY : 彭国辉
DATE: 2004-02-26
SITE: http://kacarton.yeah.net/
BLOG: http://blog.csdn.net/nhconch
EMAIL: kacarton@sohu.com

文章为作者原创,转载前请先与本人联系,转载请注明文章出处、保留作者信息,谢谢支持!
======================================================================*/

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);

调用例子:

if (navigator.appName == "Netscape")
{
document.write("

");
}
else
{
document.write("

");
}
addDiv(ad_hr, alRight, alTop, 0, 30, true);

<script language="javascript" src="lib/floatdiv.js"></script>
<script language="javascript">
if (navigator.appName == "Netscape")
{
document.write("<layer id=ad_hr 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 id=ad_hr style='position: absolute;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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: