<html>
<head>
<title>畫面逐漸變小</title>
<style>
.mydiv{
position:absolute;
left:0;
top:0;
layer-background-color:white;
background-color:white;
border:0.1px solid white
}
</style>
</head>
<body bgcolor="#000000">
<div id="div1" class="mydiv"></div>
<script language="JavaScript">
var speed=5 //變小的速度
if (document.layers){ //ns流覽器的情況下
var reference=window.innerWidth/window.innerHeight
var temp=eval("document.div1.clip")
temp.left=temp.top=0
temp.right=window.innerWidth
temp.bottom=window.innerHeight
}
else if (document.all){ //ie流覽器的情況下
var reference=document.body.clientWidth/document.body.clientHeight
var rightclip,leftclip,topclip,bottomclip //代表裁減區域的上下左右4個位置
var temp=document.all.div1.style //div層的樣式
topclip=leftclip=0 //設置上下左右4個位置的初始值
rightclip=temp.width=document.body.clientWidth
bottomclip=temp.height=document.body.clientHeight
}
function rectDiv(){
window.scrollTo(0,0) //表單預設在開始(0,0)位置,左上角
if (document.layers){ //ns流覽器的情況下
if (temp.left>window.innerWidth/2)
clearInterval(stopit) //停止縮小
temp.left+=reference*speed//動態設置裁減的上下左右4個位置
temp.top+=speed
temp.right-=reference*speed
temp.bottom-=speed
}
else if (document.all){ //ie流覽器的情況下
if (leftclip>document.body.clientWidth/2)
clearInterval(stopit) //停止縮小
temp.clip="rect( "+topclip+" "+rightclip+" "+bottomclip+" "+leftclip+")" //裁減一個區域
leftclip+=reference*speed //動態設置裁減的上下左右4個位置
topclip+=speed
rightclip-=reference*speed
bottomclip-=speed
}
}
stopit=setInterval("rectDiv()",100)
</script>
</body>
</html>
留言列表
綜合知識 (3)
