js實現橫向百葉窗效果網頁切換動畫效果的方法

2024-05-06 16:15:42

字體：大中小

來源：轉載

供稿：網友

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

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

這是一款很簡潔但是效果卻不錯的網頁切換效果，點擊新網頁后，網頁會出現藍白相間的百葉窗線條自動切換，直到網頁全部顯示完全。代碼如下：

復制代碼代碼如下:

		<html>
		<head>
		<title>js網頁百葉窗動態切換效果</title>
		<style>
		<!--
		.intro{
		position:absolute;
		left:0;
		top:0;
		layer-background-color:blue;
		background-color:blue;
		border:0.1px solid blue
		}
		-->
		</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
		temp[i].height=window.innerHeight/8
		temp2[i].top=(i-1)*temp[i].height
		}
		}
		else if (document.all){
		var clipright=document.body.clientWidth,clipleft=0
		for (i=1;i<=8;i++){
		temp[i]=eval("document.all.i"+i+".style")
		temp[i].width=document.body.clientWidth
		temp[i].height=document.body.offsetHeight/8
		temp[i].top=(i-1)*parseInt(temp[i].height)
		}
		}
		function openit(){
		window.scrollTo(0,0)
		if (document.layers){
		for (i=1;i<=8;i=i+2)
		temp[i].right-=speed
		for (i=2;i<=8;i=i+2)
		temp[i].left+=speed
		if (temp[2].left>window.innerWidth)
		clearInterval(stopit)
		}
		else if (document.all){
		clipright-=speed
		for (i=1;i<=8;i=i+2){
		temp[i].clip="rect(0 "+clipright+" auto 0)"
		}
		clipleft+=speed
		for (i=2;i<=8;i=i+2){
		temp[i].clip="rect(0 auto auto "+clipleft+")"
		}
		if (clipright<=0)
		clearInterval(stopit)
		}
		}
		function gogo(){
		stopit=setInterval("openit()",100)
		}
		gogo()
		</script>
		</body>
		</html>