首頁 > 開發者 > JavaScript
JavaScript實現上下浮動的視窗效果代碼，javascript上下浮動
本文執行個體講述了JavaScript實現上下浮動的視窗效果代碼。分享給大家供大家參考。具體如下：
這裡介紹使用JavaScript實現上下浮動的視窗，在垂直方向上漂浮，代碼內的JS函數有超豐富的浮動層定義功能，像浮動層位置高度、初始化事件觸發程序、設定浮動層為可見，用style.left設定浮動層左邊距、浮動層的運動速度等，還有更多的設定選項都能實現。
運行效果如下：
線上示範地址如下：
http://demo.jb51.net/js/2015/js-up-down-float-move-win-codes/
具體代碼如下：
<HTML><HEAD><TITLE>上下浮動的視窗</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;"><!--兩個DIV之間放上你需要顯示的內容--><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><!--兩個DIV之間放上你需要顯示的內容--></div><script LANGUAGE="JavaScript1.2">//這部分為使用者自訂區var XX=10; // 浮動層的X座標,即左邊距var xstep=1; // 移動步長，此參數越小，移動越平滑，最小值為1var delay_time=60; // 每步的時間間隔，此參數越小，移動速度越快//以下部分請勿隨意改動var YY=0; var ch=0;var oh=0;var yon=0;var ns4=document.layers?1:0 //判斷瀏覽器類型是否是NS4var ie=document.all?1:0 //判斷瀏覽器類型是否是IEvar ns6=document.getElementById&&!document.all?1:0 //判斷瀏覽器類型是否是NS6if(ie){ //如果是IEYY=document.body.clientHeight; //由clientHeight取得頁面的高度floatpoint.style.top=YY; //將浮動層位置調整到頁面底部}else if (ns4){ //如果是NS4YY=window.innerHeight; //由innerHeight取得頁面的高度document.floatpoint.pageY=YY; //將浮動層位置調整到頁面底部document.floatpoint.visibility="hidden"; //將浮動層隱藏。}else if (ns6){ //如果是NS6YY=window.innerHeight //由innerHeight取得頁面的高度document.getElementById('floatpoint').style.top=YY //將浮動層位置調整到頁面底部}function reloc1(){if(yon==0){YY=YY-xstep;} //如果當前應該上移，則減小YY值else{YY=YY+xstep;} //否則增加YY值下移if (ie){ //如果是IEch=document.body.clientHeight; //取頁面高度oh=floatpoint.offsetHeight; //取浮動層的高度}else if (ns4){ //如果是NS4ch=window.innerHeight; //取頁面高度oh=document.floatpoint.clip.height; //取浮動層的高度}else if (ns6){ //如果是NS6ch=window.innerHeight //取頁面高度oh=document.getElementById("floatpoint").offsetHeight //取浮動層的高度}if(YY<0){yon=1;YY=0;} //如果浮動層超出了上界，則設定移動方向為向下；並設定層的位置為正好在上界處if(YY>=(ch-oh)){yon=0;YY=(ch-oh);} //如果浮動層超出了下界，則設定移動方向為向上；並設定層的位置為正好在下界處if(ie){ //如果是IEfloatpoint.style.left=XX; //用style.left設定浮動層左邊距floatpoint.style.top=YY+document.body.scrollTop; //用style.top設定浮動層上邊距}else if (ns4){ //如果是NS4document.floatpoint.pageX=XX; //用.pageX設定浮動層左邊距document.floatpoint.pageY=YY+window.pageYOffset; //用.pageY設定浮動層上邊距}else if (ns6){ //如果是NS6document.getElementById("floatpoint").style.left=XXdocument.getElementById("floatpoint").style.top=YY+window.pageYOffset}}function onad(){if(ns4) //如果是NS4document.floatpoint.visibility="visible"; //設定浮動層為可見loopfunc(); //開始主迴圈，以不斷改變浮動層位置}function loopfunc(){reloc1(); //調整浮動層位置setTimeout('loopfunc()',delay_time); //設定下一次調整的延時}if (ie||ns4||ns6)window.onload=onad //初始化事件觸發程序</script></BODY></HTML>
希望本文所述對大家的JavaScript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
