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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
js数组常用最重要的方法
Feb 04 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
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
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
详解python和matlab的优势与区别
2019/06/28 Python
python 导入数据及作图的实现
2019/12/03 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
医科学校毕业生自荐信
2013/11/09 职场文书
中考标语大全
2014/06/05 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
与死神共舞观后感
2015/06/15 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL