使用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
}
}
最新消息 |
将要显示的内容。可以是广告、提示信息…… |
运行效果如下图所示: