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


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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
js倒计时抢购实例
Dec 20 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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
PHP数组实例详解
2016/06/26 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
javascript中Object使用详解
2015/01/26 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
json前后端数据交互相关代码
2018/09/19 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
证婚人搞笑证婚词
2014/01/10 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
活动志愿者自荐信
2014/01/27 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
毕业自我评价
2014/02/05 职场文书
如何写好自荐信
2014/04/07 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2014年文员工作总结
2014/11/18 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers