`
bishen
  • 浏览: 11671 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

    博客分类:
  • web
阅读更多
<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放进来。-->
分享到:
评论

相关推荐

    jQuery 弹出浮动层兼容各种浏览器

    JQuery 弹出层 可拖动 透明 兼容各种浏览器,值得收藏,以利后用。

    46种常见的浏览器兼容性问题大汇总

    6. 模态和非模态窗口问题 3 7. firefox与IE的父元素(parentElement)的区别 3 8. document.formName.item(”itemName”) 问题 3 9. 集合类对象问题 3 10. 自定义属性问题 3 11. input.type属性问题 3 12. event...

    右下角广告代码,可关闭,完美兼容多浏览器.rar

    很多网站都做了右下角广告,但对于兼容性稍微好点的确实不多,最近从广告商那里发现了下面的代码,对功能增加了一些,可以关闭,点击广告后再显示关闭字样,效果不减,用户体验稍微好点,不能关闭的右下角广告对与小...

    七星浏览器 v1.42.17.zip

    支持浮动窗口,无边框,可以固定在其他窗口前面显示。 七星浏览器 v1.42.17更新说明 修复收藏按钮显示不全的bug; 升级PepperFlash插件到19.0.0.226; 下载小于1M的文件时,使用自带页面; 调整部分默认选项,...

    8U浏览器-最快速的浏览器

    通过业界首创的防假死技术,使浏览器运行快捷流畅且不卡不死,具有自动网络收藏夹、独立播放网页视频、flash游戏提取操作等多项特色功能,并且兼容大部分用户使用习惯,支持多标签浏览、鼠标手势、隐私保护、广告...

    谷普浏览器 1.8 正式版

    谷普浏览器是一款贴近中国网民的多窗口实用浏览器,是一款基于IE 内核的、多功能、个性化浏览器,采用业界先进的恶意网址拦截技术,可自动拦截挂马、欺诈、网银仿冒等恶意网址,同时能有效防止恶意插件, 阻止弹窗和...

    22688反病毒高速安全双核云浏览器.

    采用沙箱安全技术保护所有网站和应用,支持IE和Webkit内核智 能自动切换,网页瞬间加载。使用最快的Webkit核心, 平均提速 2 倍以上. 专为中国网站优化核心代码, 兼容性更强.账户数据加 密存储, 提供周到的使用...

    企管客服反病毒云浏览器

    还集成了恶意代码智能拦截、下载文件即时扫描、恶意网站自动报警,广告窗口智能过滤等强劲功能,强化了对弹窗和浮动广告的拦截机制,使拦截准确率和体验均有较大提升,是目前市面上最安全的浏览器。

    谷普浏览器 1.8 绿色中文版

    谷普浏览器是一款贴近中国网民的多窗口实用浏览器,是一款基于IE 内核的、多功能、个性化浏览器,采用业界先进的恶意网址拦截技术,可自动拦截挂马、欺诈、网银仿冒等恶意网址,同时能有效防止恶意插件, 阻止弹窗和...

    企管客服反病毒云浏览器 v4.1.3.0.zip

    还集成了恶意代码智能拦截、下载文件即时扫描、恶意网站自动报警,广告窗口智能过滤等强劲功能,强化了对弹窗和浮动广告的拦截机制,使拦截准确率和体验均有较大提升,是目前市面上最安全的浏览器。

    企管客服反病毒云浏览器三核英文版.rar

    还集成了恶意代码智能拦截、下载文件即时扫描、恶意网站自动报警,广告窗口智能过滤等强劲功能,强化了对弹窗和浮动广告的拦截机制,使拦截准确率和体验均有较大提升,是目前市面上最安全的浏览器。

    javascript ie6兼容position:fixed实现思路

    positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离...

    html5实现输入框fixed定位在屏幕最底部兼容性

    做h5 已经有很长一段时间了,现在做的工作h5比pc上的更多,曾经解决pc端IE各个版本的兼容性也是伤透脑筋,原以为h5的会更好,殊不知,还有更头疼的问题,当设计师要设计一个聊天窗口,把输入框定位在最底部,这是再...

    傲游(Maxthon) 2.5.8.1332

    傲游浏览器允许在同一窗口内打开任意多个页面, 减少浏览器对系统资源的占用率, 提高网上冲浪的效率. 傲游基于IE内核开发, 这意味着您可以在傲游浏览器中看到和 IE 一致的效果, 并能正常使用网银等支付手段. 同时, ...

    就这儿FTP上传工具专业版 v2017

    通过业界首创的防假死技术,使浏览器运行快捷流畅且不卡不死,具有自动网络收藏夹、独立播放网页视频、flash游戏提取操作等多项特色功能,并且兼容大部分用户使用习惯,支持多标签浏览、鼠标手势、隐私保护、广告...

    [原创]基于Jquery的PANEL窗体插件

    1、既可当浮动窗口用,也可以当作网页中的内容容器框使用。 2、具备relative,absolute两种定位方式,和两种风格。 3、不仅有“关闭、最大化/还原、最小化、收起/下拉,固定最前端”等默认的右上角功能按钮,用户还可...

    屏幕取词开发包 v4.2.zip

    我们在开发屏幕取词功能时,充分考虑了客户的需求,在开发包中除集成了常见的取词功能外,还增加了显示浮动词条,键盘配合取词等功能。力求使得屏幕取词开发包功能齐全,操作简单。 屏幕取词软件特色: ·稳定性好...

Global site tag (gtag.js) - Google Analytics