<html>
<head>
<title>頁面特效--螢幕式左右拉開</title>
<style type="text/css">
A:link {text-decoration: none; color:#000000}
A:visited {text-decoration: none; color: #000000}
A:active {text-decoration: none; color: #FF0000}
A:hover {text-decoration: underline; color: FF0000}
body{font-size=9pt}
TH{FONT-SIZE: 9pt}
TD{ FONT-SIZE: 9pt}
.intro{
position:absolute;
left:0;
top:0;
layer-background-color:#9999ff;
background-color:#9999ff;
border:0.1px solid red
}
</style>
</head>
<body bgcolor="#cc99cc">
<div id="i1" class="intro"></div><div id="i2" class="intro"></div>
<script language="JavaScript">
var speed=20 //改變拉開速度，數值大速度快。
var temp=new Array();
var temp2=new Array();
//如果流覽器是Netscape的情況
if (document.layers){
for (i=1;i<=2;i++){
temp[i]=eval("document.i"+i+".clip");
temp2[i]=eval("document.i"+i);
temp[i].width=window.innerWidth/2;
temp[i].height=window.innerHeight;
temp2[i].left=(i-1)*temp[i].width;
}
}
//是IE流覽器的情況
else if (document.all){
var clipright=document.body.clientWidth/2,clipleft=0
for (i=1;i<=2;i++){
//定義div的區域，高度、寬度和X座標
temp[i]=eval("document.all.i"+i+".style");
temp[i].width=document.body.clientWidth/2;
temp[i].height=document.body.offsetHeight;
temp[i].left=(i-1)*parseInt(temp[i].width);
}
}
//拉開頁面的主要方法
function openWindow(){
window.scrollTo(0,0); //定位表單
//Netscape流覽器
if (document.layers){
temp[1].right-=speed;
temp[2].left+=speed;
if (temp[2].left>window.innerWidth/2)
clearInterval(stopWindow);
}
//IE流覽器
else if (document.all){
//通過rect剪裁，實現拉開效果
clipright-=speed;
temp[1].clip="rect(0 "+clipright+" auto 0)";
clipleft+=speed;
temp[2].clip="rect(0 auto auto "+clipleft+")";
if (clipright<=0)
clearInterval(stopWindow); //清除計時器
}
}
function init(){
stopWindow=setInterval("openWindow()",100) //迴圈執行打開視窗的操作
}
init();
</script>
</body>
</html>
留言列表
綜合知識 (3)
