js實現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法
更新時間：2015年03月02日 10:58:33 作者：站長學院
這篇文章主要介紹了js實現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法,是非常實用的js窗口效果,需要的朋友可以參考下
本文實例講述了js實現(xiàn)從中間開始往上下展開網(wǎng)頁窗口的方法。分享給大家供大家參考。具體分析如下：
這個是從中間然后慢慢向上下展開的頁面顯示效果，也還不錯，代碼如下：
復(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è)計有所幫助。
相關(guān)文章
!!一般用來將后面的表達式強制轉(zhuǎn)換為布爾類型的數(shù)據(jù)，因為javascript是弱類型的語言，所以有時需要強制轉(zhuǎn)換為相應(yīng)的類型2014-09-09
javascript數(shù)組的擴展實現(xiàn)代碼集合
非常不錯的javascript數(shù)據(jù)功能增強函數(shù)2008-06-06
本篇文章主要介紹了js鼠標滑輪滾動事件綁定的簡單實例(兼容主流瀏覽器)。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
用js實現(xiàn)終止瀏覽器對頁面HTML的繼續(xù)解析即停止解析 兼容firefox
用js實現(xiàn)終止瀏覽器對頁面HTML的繼續(xù)解析即停止解析 兼容firefox...2007-11-11
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。本文給大家介紹BootStrap組件第十章之巨幕頁頭縮略圖和警告框組件 的相關(guān)資料,需要的朋友可以參考下2016-04-04
本篇文章主要介紹了JS操作xml對象轉(zhuǎn)換為Json對象示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的查找算法,結(jié)合具體實例形式分析了javascript針對二叉樹節(jié)點最小值、最大值的相關(guān)查找操作實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了客戶端驗證用戶名和密碼 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06![用js模仿word格式刷功能實現(xiàn)代碼 [推薦]](http://img.jbzj.com/images/xgimg/bcimg8.png)
非常不錯的模仿word格式刷實現(xiàn)代碼。推薦大家參考下思路。2009-07-07
JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實現(xiàn)
本文主要介紹了JavaScrip簡單數(shù)據(jù)類型隱式轉(zhuǎn)換的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05