js實(shí)現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法
更新時(shí)間：2015年03月02日 10:58:33 作者：站長學(xué)院
這篇文章主要介紹了js實(shí)現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法,是非常實(shí)用的js窗口效果,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法。分享給大家供大家參考。具體分析如下：
這個(gè)是從中間然后慢慢向上下展開的頁面顯示效果，也還不錯(cuò)，代碼如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>js從中間展開的網(wǎng)頁窗口顯示</title>
<style>
<!--
.intro{
position:absolute;
left:0;
top:0;
layer-background-color:yellow;
background-color:#336699;
border:0.1px solid #336699
}
-->
</style>
</head>
<body>
<div id="i1" class="intro"></div><div id="i2" 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<=2;i++){
temp[i]=eval("document.i"+i+".clip")
temp2[i]=eval("document.i"+i)
temp[i].width=window.innerWidth
temp[i].height=window.innerHeight/2
temp2[i].top=(i-1)*temp[i].height
}
}
else if (document.all){
var clipbottom=document.body.offsetHeight/2,cliptop=0
for (i=1;i<=2;i++){
temp[i]=eval("document.all.i"+i+".style")
temp[i].width=document.body.clientWidth
temp[i].height=document.body.offsetHeight/2
temp[i].top=(i-1)*parseInt(temp[i].height)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
temp[1].bottom-=speed
temp[2].top+=speed
if (temp[1].bottom<=0)
clearInterval(stopit)
}
else if (document.all){
clipbottom-=speed
temp[1].clip="rect(0 auto+"+clipbottom+" 0)"
cliptop+=speed
temp[2].clip="rect("+cliptop+" auto auto)"
if (clipbottom<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>
</body>
</html>
<head>
<title>js從中間展開的網(wǎng)頁窗口顯示</title>
<style>
<!--
.intro{
position:absolute;
left:0;
top:0;
layer-background-color:yellow;
background-color:#336699;
border:0.1px solid #336699
}
-->
</style>
</head>
<body>
<div id="i1" class="intro"></div><div id="i2" 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<=2;i++){
temp[i]=eval("document.i"+i+".clip")
temp2[i]=eval("document.i"+i)
temp[i].width=window.innerWidth
temp[i].height=window.innerHeight/2
temp2[i].top=(i-1)*temp[i].height
}
}
else if (document.all){
var clipbottom=document.body.offsetHeight/2,cliptop=0
for (i=1;i<=2;i++){
temp[i]=eval("document.all.i"+i+".style")
temp[i].width=document.body.clientWidth
temp[i].height=document.body.offsetHeight/2
temp[i].top=(i-1)*parseInt(temp[i].height)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
temp[1].bottom-=speed
temp[2].top+=speed
if (temp[1].bottom<=0)
clearInterval(stopit)
}
else if (document.all){
clipbottom-=speed
temp[1].clip="rect(0 auto+"+clipbottom+" 0)"
cliptop+=speed
temp[2].clip="rect("+cliptop+" auto auto)"
if (clipbottom<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>
</body>
</html>
希望本文所述對大家的Go語言程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 浮動(dòng)的div自適應(yīng)居中顯示的js代碼
- JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼
- js浮動(dòng)圖片的動(dòng)態(tài)效果
- js 圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼
- JS 實(shí)現(xiàn)Div向上浮動(dòng)的實(shí)現(xiàn)代碼
- JS+CSS實(shí)現(xiàn)Div彈出窗口同時(shí)背景變暗的方法
- JS控制彈出新頁面窗口位置和大小的方法
- js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法
- JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
相關(guān)文章
下面小編就為大家?guī)硪黄狫S面試題---關(guān)于算法臺(tái)階的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
小程序server請求微信服務(wù)器超時(shí)的解決方法
這篇文章主要介紹了小程序server請求微信服務(wù)器超時(shí)的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了JS數(shù)組扁平化、去重、排序操作,結(jié)合實(shí)例形式詳細(xì)分析了JS數(shù)組扁平化、去重、排序等相關(guān)操作原理、實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02
Javascript自定義函數(shù)判斷網(wǎng)站訪問類型是PC還是移動(dòng)終端
如果，能夠判斷出訪問Web網(wǎng)頁的類型(PC還是移動(dòng)終端)。就可以解決許多絢麗多彩的 Flash效果出不來的問題2014-01-01
JS 實(shí)現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié)
本文主要介紹了JS 實(shí)現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié),包括ClipboardAPI和document.execCommand這兩種方法,具有一定的參考價(jià)值,感興趣的可以了解一下2025-02-02
javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
在JavaScript編程中,過多的if...elseif...else語句可能導(dǎo)致代碼難以維護(hù),可以通過switch語句、對象字面量、函數(shù)映射、數(shù)組或映射對象分發(fā)、提前返回以及使用數(shù)組的find方法來優(yōu)化這種復(fù)雜的條件判斷,提高代碼的可讀性和維護(hù)性,下面就來介紹一下2024-09-09
js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
解決bootstrap中modal遇到Esc鍵無法關(guān)閉頁面
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。不過在使用的過程中，我們還是會(huì)遇到各種小問題，今天我們探討的就是個(gè)人在使用中遇到的一個(gè)小BUG的修復(fù)。2015-03-03
不提示直接關(guān)閉網(wǎng)頁窗口的JS示例代碼
本篇文章主要是對不提示直接關(guān)閉網(wǎng)頁窗口的JS示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12