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实现的listview效果
Apr 28 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 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制作静态网站的模板框架(四)
2006/10/09 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
Python 文件操作实现代码
2009/10/07 Python
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
七夕情人节问候语
2015/11/11 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python