常看到討論中提到有關W3C標準
版子中似乎這類文章少了
因此,提出自己的版本來供各位參考指正
以下的程式碼
首先定義版本參數
代碼:
ns4 = (document.layers);
ns6 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >=5))
ie4 = (document.all);
ie5 = ((parseInt(navigator.appVersion) == 4) && (navigator.appName.indexOf("msie 5.0") != -1));
ie55 = ((parseInt(navigator.appVersion) >= 4) && (navigator.appName.indexOf("msie 5.5") != -1));
ie6 = (parseInt(navigator.appVersion) >= 4);
ver4 = (ns4 || ie4);
mac45 = (navigator.appVersion.indexOf("MSIE 4.5") != -1)
isMac = (navigator.appVersion.indexOf("Mac") != -1);
接下來,定義一個名為init()的初值化函式
代碼:
var layerRef="null",layerStyleRef="null",styleSwitch="null",nostyleSwitch="null";
var widthClipSwitch="null";
var heightClipSwitch="null";
var bWidth,bHeight,offsetX,offsetY;
var layerTop,layerLeft;
var pxSwtch;
var topStop;
function init(){
if (ns4) {
layerStyleRef="layer.";
layerRef="document.layers[";
styleSwitch="]";
pxSwitch="";
layerTop=".top";
layerLeft=".left";
widthClipSwitch="].clip.right";
heightClipSwitch="].clip.bottom";
offsetX= "window.pageXOffset";
offsetY= "window.pageYOffset";
bHeight=window.innerHeight;
bWidth= window.innerWidth;
ns4=true;
}
if (ie4){ // mean ie4,ie5,ie5.5 or above
layerStyleRef="layer.style.";
layerRef="document.all[";
styleSwitch="].style";
nostyleSwitch="]";
pxSwitch='px';
layerTop=".pixelTop";
layerLeft=".pixelLeft";
widthClipSwitch=".clientWidth";
heightClipSwitch=".clientHeight";
offsetX= "document.body.scrollLeft";
offsetY= "document.body.scrollTop";
bHeight=document.body.clientHeight;
bWidth= document.body.clientWidth;
ie=true;
}
if (ns6){
layerStyleRef="layer.style.";
layerRef="document.getElementById(";
styleSwitch=").style";
nostyleSwitch=")";
pxSwitch='px';
layerTop=".top";
layerLeft=".left";
widthClipSwitch=".offsetWidth";
heightClipSwitch=".offsetHeight";
offsetX= "window.pageXOffset";
offsetY= "window.pageYOffset";
bHeight=window.innerHeight;
bWidth= window.innerWidth;
ns6=true;
}
}
使用的方法,在BODY標籤裡加入
onload="init();"
如
代碼:
<body onload="init();">
其他的函式可以自行設計, 舉例如下
代碼:
function showLayer(layerName){
eval(layerRef+'"'+layerName+'"'+styleSwitch+'.visibility="visible"');
}
function hideLayer(layerName){
eval(layerRef+'"'+layerName+'"'+styleSwitch+'.visibility="hidden"');
}
function moveLayerto(layerName,top,left){
eval(layerRef+'"'+layerName+'"'+styleSwitch+'.top=top');
eval(layerRef+'"'+layerName+'"'+styleSwitch+'.left=left');
}
這些函式分別是顯示圖層,隱藏圖層,把圖層移到指定位置
使用時,例如先宣告一個圖層
代碼:
<div id="layerName" style="............">
...........
,/div>
而要隱藏時,即可使用(以按鈕為觸動例)
代碼:
<input type="button" value="Hide Layer" onclick="hideLayer('layerName');">
以上程式碼為本人自行撰寫,歡迎取用與修正及隨便散佈
更歡迎提出改進建議及討論
登入
註冊
問答集
搜尋
