js切换水平快门效果网页切换动画效果的方法

js切换水平快门效果网页切换动画效果的方法
本文介绍了js实现水平快门效果网页动画效果变化的方法,供大家参考,具体分析如下:

这是一个非常简单但有效的网页切换效果。点击新网页后,蓝色和白色的百叶窗之间会自动切换,直到所有网页都显示完整:

复制代码代码如下所示:
JS百叶窗的动态切换效应
<!——

介绍{。

位置:绝对;

左:0;

顶部:0;

图层背景颜色:蓝色;

背景颜色:蓝色;

边境:0.1px固蓝

}

-->




id=i6class=intro>
var速度= 20

新数组()

VaR temp2 =新的数组()

如果(文档层){

对于(i = 1;i < 8;i + +){

温度{我} = eval(文件。我+我+夹)

temp2 {我} = eval(文件。我+我)

温度{我},宽度= window.innerwidth

温度{我}。高度=窗口。innerheight / 8

temp2 {我}。=(i-1)*温度{我}。高度

}

}

否则如果(文件all){

无功clipright = document.body.clientwidth,clipleft = 0

对于(i = 1;i < 8;i + +){

温度{我} = eval(文件。所有。我+我+。风格)

温度{我},宽度= document.body.clientwidth

温度{我}。高度=文件。身体。offsetheight / 8

温度{我}。=(i-1)* parseInt(临时{我}。高度)

}

}

功能开启(){

Window.scrollTo(0,0)

如果(文档层){

对于(i = 1;i = 8;i = i + 2)

温度{右} -右=速度

对于(i = 2;i = 8;i = i + 2)

温度{左} + =速度

如果(临时{ 2 }。左>窗口。innerwidth)

ClearInterval(够了)

}

否则如果(文件all){

clipright =速度

对于(i = 1;i < = 8;i = i + 2){

温度{我}。夹=矩形(0 + clipright +汽车0)

}

clipleft + =速度

对于(i = 2;i < = 8;i = i + 2){

温度{我}。夹=矩形(0汽车+ clipleft + )

}

如果(clipright < = 0)

ClearInterval(够了)

}

}

函数(){

够了= setInterval(开启()

}

()

希望本文能对大家的javascript程序设计有所帮助。

tag:动画效果方法网页快门效果

相关内容