下面是JS脚本(floatdiv.js)
/*====================================================================== 浮动块支持脚本 DESIGN BY : 彭国辉 DATE: 2004-02-26 SITE: http://kacarton.yeah.net/ 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);
调用例子:
<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>
没有相关教程
|