多浏览器支持的右下角浮动窗口


Posted in Javascript onApril 01, 2010
<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>

以上是js代码,下面是浮动的窗口
<div style='position:absolute;top:0;left:0;width:300px;height:180px;border:3px double #AAA' id='msgtip'>dfddfdf</div>
Javascript 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
小程序实现tab标签页
Nov 16 Javascript
js 多浏览器分别判断代码
Apr 01 #Javascript
JS 遮照层实现代码
Mar 31 #Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 #Javascript
jQuery 遍历json数组的实现代码
Sep 22 #Javascript
Javascript load Page,load css,load js实现代码
Mar 31 #Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 #Javascript
jquery+json实现的搜索加分页效果
Mar 31 #Javascript
You might like
长波知识介绍
2021/03/01 无线电
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
ASP Json Parser修正版
2009/12/06 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
关于python的list相关知识(推荐)
2017/08/30 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
爱情保证书范文
2014/02/01 职场文书
小学清明节活动方案
2014/03/08 职场文书
交通事故协议书
2014/04/15 职场文书
党员检讨书范文
2014/12/27 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android