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 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
js实现返回顶部效果
Mar 10 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
基于vuex实现购物车功能
Jan 10 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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
使用URL传输SESSION信息
2015/07/14 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
详解Django中的权限和组以及消息
2015/07/23 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Python实现全排列的打印
2018/08/18 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
修辞手法有哪些?
2019/08/29 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android