JavaScript实现上下浮动的窗口

 首页 > 网页特效 > 层和布局 > JavaScript实现上下浮动的窗口

JavaScript实现上下浮动的窗口

 2018-07-22  345  收藏  0 赞一个  0 真差劲  0 去评论

<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>


<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 



</BODY>
</HTML>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

avaScript实现上下浮动的窗口，在垂直方向上漂浮，代码内的JS函数有超丰富的浮动层定义功能，像浮动层位置高度、初始化事件触发器、设定浮动层为可见，用style.left设定浮动层左边距、浮动层的运动速度等，还有更多的设置选项都能实现。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行