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 相关文章推荐
js中的push和join方法使用介绍
Oct 08 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
js逆向解密之网络爬虫
May 30 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 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 获取远程网页内容的函数
2009/09/08 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
文字幻灯片
2006/06/26 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python smtplib发送带附件邮件小程序
2018/05/22 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
从python读取sql的实例方法
2020/07/21 Python
Java的基础面试题附答案
2016/01/10 面试题
战友聚会邀请函
2014/01/18 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
股东授权委托书
2014/10/15 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android