js實現綠白相間豎向網頁百葉窗動畫切換效果

2024-05-06 16:15:43

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了js實現綠白相間豎向網頁百葉窗動畫切換效果,實例分析了javascript實現百葉窗動畫效果的技巧,需要的朋友可以參考下

本文實例講述了js實現綠白相間豎向網頁百葉窗動畫切換效果。分享給大家供大家參考。具體分析如下：

前面我們講解了一個網頁百葉窗切換動畫效果，不過是橫向百葉窗，這個是豎向百葉窗，代碼基本一樣：

復制代碼代碼如下:

		<html>
		<head>
		<title>百葉窗頁面切換效果</title>
		<style>
		<!--
		.intro{
		position:absolute;
		left:0;
		top:0;
		layer-background-color:green;
		background-color:green;
		border:0.1px solid green
		}
		-->
		</style>
		</head>
		<body>
		<div id="i1" class="intro"></div><div id="i2" class="intro"></div><div id="i3"
		class="intro"></div><div id="i4" class="intro"></div><div id="i5" class="intro"></div><div
		id="i6" class="intro"></div><div id="i7" class="intro"></div><div id="i8" class="intro"></div>
		<script language="JavaScript1.2">
		var speed=20
		var temp=new Array()
		var temp2=new Array()
		if (document.layers){
		for (i=1;i<=8;i++){
		temp[i]=eval("document.i"+i+".clip")
		temp2[i]=eval("document.i"+i)
		temp[i].width=window.innerWidth/8-0.3
		temp[i].height=window.innerHeight
		temp2[i].left=(i-1)*temp[i].width
		}
		}
		else if (document.all){
		var clipbottom=document.body.offsetHeight,cliptop=0
		for (i=1;i<=8;i++){
		temp[i]=eval("document.all.i"+i+".style")
		temp[i].width=document.body.clientWidth/8
		temp[i].height=document.body.offsetHeight
		temp[i].left=(i-1)*parseInt(temp[i].width)
		}
		}
		function openit(){
		window.scrollTo(0,0)
		if (document.layers){
		for (i=1;i<=8;i=i+2)
		temp[i].bottom-=speed
		for (i=2;i<=8;i=i+2)
		temp[i].top+=speed
		if (temp[2].top>window.innerHeight)
		clearInterval(stopit)
		}
		else if (document.all){
		clipbottom-=speed
		for (i=1;i<=8;i=i+2){
		temp[i].clip="rect(0 auto+"+clipbottom+" 0)"
		}
		cliptop+=speed
		for (i=2;i<=8;i=i+2){
		temp[i].clip="rect("+cliptop+" auto auto)"
		}
		if (clipbottom<=0)
		clearInterval(stopit)
		}
		}
		function gogo(){
		stopit=setInterval("openit()",100)
		}
		gogo()
		</script>
		</body>
		</html>