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


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中变量相关的细节分析
Aug 13 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
jquery实用代码片段集合
Aug 12 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
详解微信第三方小程序代开发
2017/06/23 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
python协程用法实例分析
2015/06/04 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
what is the difference between ext2 and ext3
2015/08/25 面试题
化工专业大学生职业生涯规划书
2014/01/14 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
Python必备技巧之函数的使用详解
2022/04/04 Python