快捷導(dǎo)航

JavaScript實(shí)現(xiàn)上下浮動(dòng)的窗口效果代碼

更新時(shí)間：2015年10月12日 09:28:44 作者：企鵝

這篇文章主要介紹了JavaScript實(shí)現(xiàn)上下浮動(dòng)的窗口效果代碼,可實(shí)現(xiàn)自定義窗口在垂直方向上彈性移動(dòng)的效果,代碼備有完整的注釋說(shuō)明供讀者參考學(xué)習(xí),需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)上下浮動(dòng)的窗口效果代碼。分享給大家供大家參考。具體如下：

這里介紹使用JavaScript實(shí)現(xiàn)上下浮動(dòng)的窗口，在垂直方向上漂浮，代碼內(nèi)的JS函數(shù)有超豐富的浮動(dòng)層定義功能，像浮動(dòng)層位置高度、初始化事件觸發(fā)器、設(shè)定浮動(dòng)層為可見(jiàn)，用style.left設(shè)定浮動(dòng)層左邊距、浮動(dòng)層的運(yùn)動(dòng)速度等，還有更多的設(shè)置選項(xiàng)都能實(shí)現(xiàn)。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-up-down-float-move-win-codes/

具體代碼如下：

<HTML>
<HEAD>
<TITLE>上下浮動(dòng)的窗口</TITLE>
<style type="text/css">
<!--
a:hover{color:00ff00}
a {color:000000;text-decoration:none}
-->
</style>
</HEAD>
<BODY>
<div id="floatpoint" STYLE="position:absolute;visibility:visible;">
<!--兩個(gè)DIV之間放上你需要顯示的內(nèi)容-->
<table border=1 cellspacing="0" cellpadding="0" bordercolorlight="#000000" bordercolor="#FFFFFF">
 <tr>
    <td align=center bgcolor=#E3E3E3 style="color:HIGHLIGHTTEXT">
  <font color="#000000">
    最新消息！</font>
    </td>
 </tr>
 <tr>
    <td bgcolor=WINDOW style="font-size:9pt;color:WINDOWTEXT">
    <a href="#" target="_blank">腳本之家</a><br>
    <div></div>
    </td>
 </tr>
</table>
<!--兩個(gè)DIV之間放上你需要顯示的內(nèi)容-->
</div>
<script LANGUAGE="JavaScript1.2">
//這部分為用戶自定義區(qū)
var XX=10; // 浮動(dòng)層的X坐標(biāo),即左邊距
var xstep=1; // 移動(dòng)步長(zhǎng)，此參數(shù)越小，移動(dòng)越平滑，最小值為1
var delay_time=60; // 每步的時(shí)間間隔，此參數(shù)越小，移動(dòng)速度越快
//以下部分請(qǐng)勿隨意改動(dòng)
var YY=0; 
var ch=0;
var oh=0;
var yon=0;
var ns4=document.layers?1:0 //判斷瀏覽器類型是否是NS4
var ie=document.all?1:0 //判斷瀏覽器類型是否是IE
var ns6=document.getElementById&&!document.all?1:0 //判斷瀏覽器類型是否是NS6
if(ie){ //如果是IE
YY=document.body.clientHeight; //由clientHeight取得頁(yè)面的高度
floatpoint.style.top=YY; //將浮動(dòng)層位置調(diào)整到頁(yè)面底部
}
else if (ns4){ //如果是NS4
YY=window.innerHeight; //由innerHeight取得頁(yè)面的高度
document.floatpoint.pageY=YY; //將浮動(dòng)層位置調(diào)整到頁(yè)面底部
document.floatpoint.visibility="hidden"; //將浮動(dòng)層隱藏。
}
else if (ns6){ //如果是NS6
YY=window.innerHeight //由innerHeight取得頁(yè)面的高度
document.getElementById('floatpoint').style.top=YY //將浮動(dòng)層位置調(diào)整到頁(yè)面底部
}
function reloc1(){
if(yon==0){YY=YY-xstep;} //如果當(dāng)前應(yīng)該上移，則減小YY值
else{YY=YY+xstep;} //否則增加YY值下移
if (ie){ //如果是IE
ch=document.body.clientHeight; //取頁(yè)面高度
oh=floatpoint.offsetHeight; //取浮動(dòng)層的高度
}
else if (ns4){ //如果是NS4
ch=window.innerHeight; //取頁(yè)面高度
oh=document.floatpoint.clip.height; //取浮動(dòng)層的高度
}
else if (ns6){ //如果是NS6
ch=window.innerHeight //取頁(yè)面高度
oh=document.getElementById("floatpoint").offsetHeight //取浮動(dòng)層的高度
}
if(YY<0){yon=1;YY=0;} //如果浮動(dòng)層超出了上界，則設(shè)定移動(dòng)方向?yàn)橄蛳拢徊⒃O(shè)定層的位置為正好在上界處
if(YY>=(ch-oh)){yon=0;YY=(ch-oh);} //如果浮動(dòng)層超出了下界，則設(shè)定移動(dòng)方向?yàn)橄蛏?；并設(shè)定層的位置為正好在下界處
if(ie){ //如果是IE
floatpoint.style.left=XX; //用style.left設(shè)定浮動(dòng)層左邊距
floatpoint.style.top=YY+document.body.scrollTop; //用style.top設(shè)定浮動(dòng)層上邊距
}
else if (ns4){ //如果是NS4
document.floatpoint.pageX=XX; //用.pageX設(shè)定浮動(dòng)層左邊距
document.floatpoint.pageY=YY+window.pageYOffset; //用.pageY設(shè)定浮動(dòng)層上邊距
}
else if (ns6){ //如果是NS6
document.getElementById("floatpoint").style.left=XX
document.getElementById("floatpoint").style.top=YY+window.pageYOffset
}
}
function onad(){
if(ns4) //如果是NS4
document.floatpoint.visibility="visible"; //設(shè)定浮動(dòng)層為可見(jiàn)
loopfunc(); //開(kāi)始主循環(huán)，以不斷改變浮動(dòng)層位置
}
function loopfunc(){
reloc1(); //調(diào)整浮動(dòng)層位置
setTimeout('loopfunc()',delay_time); //設(shè)定下一次調(diào)整的延時(shí)
}
if (ie||ns4||ns6)
window.onload=onad //初始化事件觸發(fā)器
</script>
</BODY>
</HTML>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: