JavaScript实现上下浮动的窗口效果代码
本文实例讲述了JavaScript实现上下浮动的窗口效果代码。分享给大家供大家参考。具体如下：
这里介绍使用JavaScript实现上下浮动的窗口，在垂直方向上漂浮，代码内的JS函数有超丰富的浮动层定义功能，像浮动层位置高度、初始化事件触发器、设定浮动层为可见，用style.left设定浮动层左边距、浮动层的运动速度等，还有更多的设置选项都能实现。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-up-down-float-move-win-codes/
具体代码如下：
<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程序设计有所帮助。
相关推荐
-
多浏览器支持的右下角浮动窗口
复制代码 代码如下: <script> function $(id) { return document.getElementById(id); } var LoginUI = !!window.LoginUI || {}; LoginUI.getViewportWidth = function(){ var width=0; if(document.documentElement && document.documentElement.clientWidth){ width=
-
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
本文实例讲述了JS实现可缩放.拖动.关闭和最小化的浮动窗口方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
-
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n
-
JS实现简单易用的手机端浮动窗口显示效果
本文实例讲述了JS实现简单易用的手机端浮动窗口显示效果.分享给大家供大家参考,具体如下: html: <style type="text/css"> .fdBonTel{ width:100%; height:53px; position:fixed; background:#0052ae; text-align:center; left:0; bottom:0; z-index:999; } .fdOnline{ background:url(index/images/o
-
JS简单实现浮动窗口效果示例
本文实例讲述了JS简单实现浮动窗口效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
JQuery 实现的页面滚动时浮动窗口控件
1. Introduction: 这个控件能够实现的效果是当你的页面滚动时,某个DIV永远停留在你需要它停留的位置.同时可以为这个DIV设定个容器,当滚动条已经超过了这个容器,那么这个DIV就不再滚动了.有时候如果需要做个比较好用的导航条,使用这个控件挺不错的. 2. Code & Properties: 这个js文件是在jQuery和JQeury UI的核心上扩展的.所以使用它前你必须到JQuery的官网下载那两个js文件,jquery.js和ui.core.js. 整个javascript如
-
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
本文实例讲述了jquery实现浮动在网页右下角的彩票开奖公告窗口.分享给大家供大家参考.具体如下: 这是一个浮动在网页右下角的彩票开奖公告窗口,完全可当作一个右下角广告的代码来使用,而且效果中加入了简洁的动画功能,浮动窗口是从下往上滑出的,避免单调:另外本浮动窗口带有"关闭"功能,用户可以关闭它. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-buttom-alert-dlg-codes/ 具体代码如下: &
-
Android利用浮动窗口提示用户操作
上次我们实现了利用viewpager实现对新用户的功能性介绍,今天我们来显示利用浮动窗口对用户进行操作的引导.先看效果图. 虽然界面比较丑,但是可以看到我们还是可以实现对用户进行比较好的操作提示,下面介绍怎么实现这种效果. 集成环境 这个项目中,我采用的是TourGuide开源项目,可以直接进入github地址进行学习与下载,这里我们只是简单的介绍怎么使用他来实现浮动界面的引导效果.首先是添加引用: 在你的gradle file中添加以下依赖,然后点击sync将依赖添加到自己的项目中就可以直接使
-
jQuery之浮动窗口实现代码(两种方法)
第一种方法:预览: Html代码 复制代码 代码如下: <html> <head> <title>浮动窗口</title> <link type="text/css" rel="stylesheet" href="css/overflow.css" /> <script type="text/javascript" src="js/jquery.js&
-
jQuery实现弹出带遮罩层的居中浮动窗口效果
本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none