js實(shí)現(xiàn)綠白相間豎向網(wǎng)頁(yè)百葉窗動(dòng)畫(huà)切換效果
更新時(shí)間：2015年03月02日 11:59:04 作者：站長(zhǎng)學(xué)院
這篇文章主要介紹了js實(shí)現(xiàn)綠白相間豎向網(wǎng)頁(yè)百葉窗動(dòng)畫(huà)切換效果,實(shí)例分析了javascript實(shí)現(xiàn)百葉窗動(dòng)畫(huà)效果的技巧,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)綠白相間豎向網(wǎng)頁(yè)百葉窗動(dòng)畫(huà)切換效果。分享給大家供大家參考。具體分析如下：
前面我們講解了一個(gè)網(wǎng)頁(yè)百葉窗切換動(dòng)畫(huà)效果，不過(guò)是橫向百葉窗，這個(gè)是豎向百葉窗，代碼基本一樣：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>百葉窗頁(yè)面切換效果</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>
<head>
<title>百葉窗頁(yè)面切換效果</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
WebStorm ES6 語(yǔ)法支持設(shè)置&babel使用及自動(dòng)編譯(詳解)
下面小編就為大家?guī)?lái)一篇WebStorm ES6 語(yǔ)法支持設(shè)置&babel使用及自動(dòng)編譯(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
原生javascript移動(dòng)端滑動(dòng)banner效果
這篇文章主要為大家詳細(xì)介紹了原生javascript移動(dòng)端滑動(dòng)banner效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了JavaScript的表達(dá)式與運(yùn)算符，需要的朋友可以參考下2015-11-11
純 JS 實(shí)現(xiàn)放大縮小拖拽功能(完整代碼)
這篇文章主要介紹了純js實(shí)現(xiàn)放大縮小拖拽功能，文中給大家提到了在開(kāi)發(fā)過(guò)程中遇到的一些問(wèn)題及解決方法,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)漂亮的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript對(duì)象屬性操作實(shí)例解析
這篇文章主要介紹了JavaScript對(duì)象屬性操作實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
作用域（scope）是javascript語(yǔ)言的基石之一，在構(gòu)建復(fù)雜程序時(shí)可能是最頭痛的東西,所以這里羅列了五句話輕松搞定并且附上了示例。給需要的朋友參考學(xué)習(xí)。2016-07-07
js實(shí)現(xiàn)仿網(wǎng)易點(diǎn)擊彈出提示同時(shí)背景變暗效果
這篇文章主要介紹了js實(shí)現(xiàn)仿網(wǎng)易點(diǎn)擊彈出提示同時(shí)背景變暗效果,涉及javascript彈出框及頁(yè)面元素樣式操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了JS輪播圖中緩動(dòng)函數(shù)的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01