使用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

}

}

 最新消息

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

运行效果如下图所示:

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

  1. html自动弹出窗效果,JavaScript实现弹出窗口效果

    本文实例为大家分享了JavaScript实现弹出窗口的具体代码,供大家参考,具体内容如下 思路 1.总体使用两个div,一个作为底层展示,一个做为弹出窗口: 2.两个窗口独立进行CSS设计,通过dis ...

  2. java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化

    之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...

  3. Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新)...

    [Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...

  4. Java前端学习(一)JavaScript脚本语言基础

    JavaScript脚本语言基础 前言 一.JavaScript简介 1.应用 2.特点 3.示例 4.补充 二.语法基础 1.数据类型 2.表达式和运算符 3.流程控制语句 4.函数 三.对话框 1 ...

  5. 解决IOS滑动页面fixed浮动问题

    解决IOS滑动页面fixed浮动问题 参考文章: (1)解决IOS滑动页面fixed浮动问题 (2)https://www.cnblogs.com/jeremy5810/p/7681816.html ...

  6. 从父页面在iframe中调用JavaScript代码

    基本上,我将iframe嵌入到页面中,并且iframe具有一些我需要从父页面调用的JavaScript例程. 现在相反非常简单,因为您只需要调用parent.functionName() ,但是不幸的 ...

  7. 用java的io做一个代码计数器,如何制作Java页面计数器_java

    大庆采油六厂采油工艺研究所 王兵 王波 常常逛WWW的人,一定对许多起始页上的计数器感兴趣.每当你光临某个站点的起始页时,它的计数器就很亲切地告诉你,从某年某月某日开始,你是第几位光临的人.你可能也想 ...

  8. java页面请求跑批处理sql的有关问题

    java页面请求跑批处理sql的问题 我想做一个页面,用户登录后可以点一个按钮,开始跑批处理sql. 要求:1,用户的页面不能重复点击跑批按钮.   2,用户的会话关闭后,批处理仍然能跑完.除非用户自 ...

  9. java 页面输出一个页面_java学习之:一个完整页面输出信息的过程(以输出Doctor表中信息为例)...

    最近在练习java程序,总结一下从数据库查询信息并输出到jsp页面的过程.主要数据处理在src.cn.javatest包下面 项目预览 1,配置项目根目录src目录下的druid.properties ...

最新文章

  1. 智能改变未来,创新引领世界,第二届深圳国际人工智能展暨智能制造创新高峰论坛盛大启幕!
  2. Apache Spark技术实战之6 -- spark-submit常见问题及其解决
  3. boost::fusion::count用法的测试程序
  4. win10安装jboss7_win7系统上jboss6 设置https访问
  5. Mult-Nim博弈
  6. flask sql外键使用_如何在SQL中使用外键?
  7. 芯唐语音识别_大联大品佳推出基于新唐科技ISD9160+Cyberon算法的语音识别方案
  8. 字符集不同导致的ORA-00972
  9. html3d电子相册,3d电子相册制作软件哪个好, 自带翻页电子相册模板,电子相册生成flash等多种格式...
  10. 新书上市|这套北大数学系青睐的数学科普书,又添新成员
  11. 【点宽专栏】Dual Thrust 交易策略
  12. 一维搜索---黄金分割法
  13. 瑞尔森大学计算机网络专业怎么样,瑞尔森大学怎么样?
  14. 【设计模式系列】--单例模式
  15. Latex表格线宽修改方法以及内容左对齐。
  16. java项目-第161期ssm弹幕视频网站系统_ssm毕业设计_计算机毕业设计
  17. android os感染病毒,安卓系统能感染win系统病毒吗?
  18. oracle spa性能测试,SPA for 11g 分析性能
  19. 演化算法(一) 基本概念
  20. 爬取中关村电脑网惠普电脑各类子品牌报价及相关配置信息

热门文章

  1. Maple使用(一):Maple转Latex
  2. jsp 知乎_JSP简介
  3. 十招让Win10跑得更快
  4. python 中 打印输出 换行
  5. 分享objTo3d-tiles工具
  6. 计算机毕业论文选题推荐|软件工程|信息管理|数据分析|系列一
  7. 关于python清屏
  8. 时代周刊》:用形象化的老办法对付大数据
  9. 简单实现aside菜单栏折叠 vuex
  10. 往事如烟 - 摘掉脱贫的帽子