Home > Article > Web Front-end > JavaScript implements floating window effect code_javascript skills

JavaScript implements floating window effect code_javascript skills

WBOYOriginal: 2016-05-16 15:37:041741browse

The example in this article describes the JavaScript code for implementing a floating window effect. Share it with everyone for your reference. The details are as follows:

Here we introduce the use of JavaScript to realize a floating window that floats in the vertical direction. The JS function in the code has rich floating layer definition functions, such as floating layer position and height, initialization event trigger, and setting the floating layer to be visible. , use style.left to set the left margin of the floating layer, the movement speed of the floating layer, etc., and more setting options can be achieved.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<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; // 移动步长，此参数越小，移动越平滑，最小值为1
var delay_time=60; // 每步的时间间隔，此参数越小，移动速度越快
//以下部分请勿随意改动
var YY=0; 
var ch=0;
var oh=0;
var yon=0;
var ns4=document.layers&#63;1:0 //判断浏览器类型是否是NS4
var ie=document.all&#63;1:0 //判断浏览器类型是否是IE
var ns6=document.getElementById&&!document.all&#63;1:0 //判断浏览器类型是否是NS6
if(ie){ //如果是IE
YY=document.body.clientHeight; //由clientHeight取得页面的高度
floatpoint.style.top=YY; //将浮动层位置调整到页面底部
}
else if (ns4){ //如果是NS4
YY=window.innerHeight; //由innerHeight取得页面的高度
document.floatpoint.pageY=YY; //将浮动层位置调整到页面底部
document.floatpoint.visibility="hidden"; //将浮动层隐藏。
}
else if (ns6){ //如果是NS6
YY=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){ //如果是IE
ch=document.body.clientHeight; //取页面高度
oh=floatpoint.offsetHeight; //取浮动层的高度
}
else if (ns4){ //如果是NS4
ch=window.innerHeight; //取页面高度
oh=document.floatpoint.clip.height; //取浮动层的高度
}
else if (ns6){ //如果是NS6
ch=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){ //如果是IE
floatpoint.style.left=XX; //用style.left设定浮动层左边距
floatpoint.style.top=YY+document.body.scrollTop; //用style.top设定浮动层上边距
}
else if (ns4){ //如果是NS4
document.floatpoint.pageX=XX; //用.pageX设定浮动层左边距
document.floatpoint.pageY=YY+window.pageYOffset; //用.pageY设定浮动层上边距
}
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"; //设定浮动层为可见
loopfunc(); //开始主循环，以不断改变浮动层位置
}
function loopfunc(){
reloc1(); //调整浮动层位置
setTimeout('loopfunc()',delay_time); //设定下一次调整的延时
}
if (ie||ns4||ns6)
window.onload=onad //初始化事件触发器
</script>
</BODY>
</HTML>

I hope this article will be helpful to everyone’s JavaScript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery PHP implements editable table field content and saves it in real time_jqueryNext article：jQuery PHP implements editable table field content and saves it in real time_jquery

See more

JavaScript implements floating window effect code_javascript skills

Related articles