兼容所有浏览器的浮动窗口

<script>
function $(id)
{
return document.getElementById(id);
}
var LoginUI = !!window.LoginUI || {};

LoginUI.getViewportWidth = function(){
var width=0;
if(document.documentElement && document.documentElement.clientWidth){
width=document.documentElement.clientWidth;}
else if(document.body && document.body.clientWidth){
width=document.body.clientWidth;}
else if(window.innerWidth){
width=window.innerWidth-18;}
return width;
}


LoginUI.getViewportHeight = function() {
var height=0;
if(window.innerHeight){
height=window.innerHeight-18;}
else if(document.documentElement&&document.documentElement.clientHeight){
height=document.documentElement.clientHeight;}
else if(document.body&&document.body.clientHeight){
height=document.body.clientHeight;}
return height;
}

LoginUI.getViewportScrollX = function(){
var scrollX=0;
if(document.documentElement&&document.documentElement.scrollLeft){
scrollX=document.documentElement.scrollLeft;}
else if(document.body&&document.body.scrollLeft){
scrollX=document.body.scrollLeft;}
else if(window.pageXOffset){
scrollX=window.pageXOffset;}
else if(window.scrollX){
scrollX=window.scrollX;}
return scrollX;
}

LoginUI.getViewportScrollY=function() {
var scrollY=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollY=document.documentElement.scrollTop;}
else if(document.body&&document.body.scrollTop){
scrollY=document.body.scrollTop;}
else if(window.pageYOffset){
scrollY=window.pageYOffset;}
else if(window.scrollY){
scrollY=window.scrollY;}
return scrollY;
}

function scrollMsgTip()
{
var t = LoginUI.getViewportHeight() +
LoginUI.getViewportScrollY() - $("msgtip").offsetHeight;
$("msgtip").style.top = t + "px";
$("msgtip").style.left = LoginUI.getViewportWidth() +
LoginUI.getViewportScrollX() - $("msgtip").offsetWidth + "px";
}

function scrollTip()
{
scrollMsgTip()
}

window.onload = window.onscroll = scrollTip;

</script>

页面代码:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

</head>
<body>
<div style='position:absolute;top:0;left:0;width:300px;height:180px;border:3px double #AAA' id='msgtip'>dfddfdf</div>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>
</html>
<!-- 可以根据自己需求,更改浮动位置,记得把JS放进来。-->
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断路器保护灵敏度校验整改及剩余电流监测试点应用站用交流系统断

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值