java页面左右浮动窗,使用JavaScript实现上下浮动的窗口

使用JavaScript实现上下浮动的窗口效果。其中主要使用setTimeout函数实现定时设置窗口的left和top值，以实现窗口的上下左右移动。下面是实现代码：

上下浮动的窗口

var stepLength = 1;        // 移动步长，此参数越小，移动越平滑，最小值为1

var delay_time = 160;    // 每步的时间间隔，此参数越小，移动速度越快

var upDownState = 0;    // 浮动层上下移状态(0-上移、非0-下移)

var xLength = 10;        // 浮动层的X坐标,即左边距

var yLength = 0;        // 浮动层的Y坐标,即上边距

var bodyHeight = 0;     // 页面高度

var divHeight = 0;      // 浮动层高度

// 判断浏览器是否是IE、NS4、NS6

var ns4 = document.layers ? 1 : 0;

var ie = document.all ? 1 : 0;

var ns6 = (document.getElementById && !document.all) ? 1 : 0;

window.onload = function(){

// 获得页面的高度，然后将浮动层的上边距设置为页面高度

if(ie){

yLength = document.body.clientHeight;

floatpoint.style.top = yLength;

} else if (ns4){

yLength = window.innerHeight;

document.floatpoint.pageY = yLength;

document.floatpoint.visibility = "hidden";

} else if (ns6){

yLength=window.innerHeight

document.getElementById('floatpoint').style.top=yLength

}

if (ie || ns4 || ns6) {

if(ns4)    {

document.floatpoint.visibility = "visible";

}

loopSetPosition();

}

};

/**

* 循环设置浮动层的位置

*/

function loopSetPosition(){

resetLocation();

// 设定下一次调整的延时

setTimeout(function(){

loopSetPosition();

}, delay_time);

}

/**

* 设置浮动块的位置

*/

function resetLocation(){

// 根据浮动层上下移动状态设置上边距

if(upDownState == 0){

yLength = yLength - stepLength; // 如果上移，则减小yLength值

} else{

yLength = yLength + stepLength; // 否则增加yLength值下移

}

// 取出页面高度和浮动层高度

if (ie){

bodyHeight = document.body.clientHeight;

divHeight = floatpoint.offsetHeight;

} else if (ns4){

bodyHeight = window.innerHeight;

divHeight = document.floatpoint.clip.height;

} else if (ns6){

bodyHeight = window.innerHeight;

divHeight = document.getElementById("floatpoint").offsetHeight;

}

// 如果浮动层超出了上界，则设定移动方向为向下；并设定层的位置为正好在上界处

if(yLength 

upDownState = 1;

yLength = 0;

}

// 如果浮动层超出了下界，则设定移动方向为向上；并设定层的位置为正好在下界处

if(yLength >= (bodyHeight-divHeight)){

upDownState = 0;

yLength = (bodyHeight-divHeight);

}

// 设置浮动层的左边距和上边距

if(ie){

floatpoint.style.left = xLength;

floatpoint.style.top = yLength+document.body.scrollTop;

} else if (ns4){

document.floatpoint.pageX = xLength;

document.floatpoint.pageY = yLength + window.pageYOffset;

} else if (ns6){

document.getElementById("floatpoint").style.left = xLength

document.getElementById("floatpoint").style.top = yLength + window.pageYOffset

}

}

最新消息

将要显示的内容。可以是广告、提示信息……

运行效果如下图所示：