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实现跳转菜单的具体方法
Jul 05 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
ES6数组的扩展详解
Apr 25 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
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删除数组中特定元素的两种方法
2013/07/02 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
python导入库的具体方法
2020/06/18 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
会计岗位职责模板
2014/03/12 职场文书
拉歌口号大全
2014/06/13 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
学校推普周活动总结
2015/05/07 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android