js實(shí)現(xiàn)綠白相間豎向網(wǎng)頁(yè)百葉窗動(dòng)畫(huà)切換效果
本文實(shí)例講述了js實(shí)現(xiàn)綠白相間豎向網(wǎng)頁(yè)百葉窗動(dòng)畫(huà)切換效果。分享給大家供大家參考。具體分析如下:
前面我們講解了一個(gè)網(wǎng)頁(yè)百葉窗切換動(dòng)畫(huà)效果,不過(guò)是橫向百葉窗,這個(gè)是豎向百葉窗,代碼基本一樣:
<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)文章
css和js實(shí)現(xiàn)彈出登錄居中界面完整代碼
這篇文章主要介紹了css和js實(shí)現(xiàn)彈出登錄居中界面,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11JavaScript實(shí)現(xiàn)表格動(dòng)態(tài)變色
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)表格動(dòng)態(tài)變色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09openlayers實(shí)現(xiàn)圖標(biāo)拖動(dòng)獲取坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了openlayers實(shí)現(xiàn)圖標(biāo)拖動(dòng)獲取坐標(biāo),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09Javascript自定義函數(shù)判斷網(wǎng)站訪問(wèn)類型是PC還是移動(dòng)終端
如果,能夠判斷出訪問(wèn)Web網(wǎng)頁(yè)的類型(PC還是移動(dòng)終端)。就可以解決許多絢麗多彩的 Flash效果出不來(lái)的問(wèn)題2014-01-01js中一個(gè)函數(shù)獲取另一個(gè)函數(shù)返回值問(wèn)題探討
在本文將為大家詳細(xì)探討下js中一個(gè)函數(shù)獲取另一個(gè)函數(shù)返回值問(wèn)題,比較模糊的朋友可以學(xué)習(xí)下哦2013-11-11js動(dòng)態(tài)修改表格行colspan列跨度的方法
這篇文章主要介紹了js動(dòng)態(tài)修改表格行colspan列跨度的方法,實(shí)例分析了javascript動(dòng)態(tài)修改html中table屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03詳解如何使用webpack打包多頁(yè)jquery項(xiàng)目
這篇文章主要介紹了詳解如何使用webpack打包多頁(yè)jquery項(xiàng)目,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
這篇文章主要介紹了Bootstrap導(dǎo)航欄各元素操作方法,針對(duì)表單、按鈕、文本進(jìn)行操作,感興趣的小伙伴們可以參考一下2015-12-12