JavaScript实现上下浮动的窗口效果代码


Posted in Javascript onOctober 12, 2015

本文实例讲述了JavaScript实现上下浮动的窗口效果代码。分享给大家供大家参考。具体如下:

这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度、初始化事件触发器、设定浮动层为可见,用style.left设定浮动层左边距、浮动层的运动速度等,还有更多的设置选项都能实现。

运行效果截图如下:

JavaScript实现上下浮动的窗口效果代码

在线演示地址如下:

具体代码如下:

<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?1:0 //判断浏览器类型是否是NS4
var ie=document.all?1:0 //判断浏览器类型是否是IE
var ns6=document.getElementById&&!document.all?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>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
javascript函数式编程程序员的工具集
Oct 11 #Javascript
深入探讨javascript函数式编程
Oct 11 #Javascript
Javascript函数式编程语言
Oct 11 #Javascript
Javascript函数式编程简单介绍
Oct 11 #Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 #Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 #Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 #Javascript
You might like
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JavaScript入门教程 Cookies
2009/01/31 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python如何从文件读取数据及解析
2019/09/19 Python
python selenium循环登陆网站的实现
2019/11/04 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Python 如何展开嵌套的序列
2020/08/01 Python
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
学校介绍信范文
2014/01/14 职场文书
高级销售求职信
2014/02/21 职场文书