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

 更新时间:2010年04月01日 00:37:36   作者:  
支持各种浏览器的右下角浮动窗口,需要的朋友可以参考下。
复制代码 代码如下:

<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>

相关文章

  • js实现详情页放大镜效果

    js实现详情页放大镜效果

    这篇文章主要为大家详细介绍了js实现详情页放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • JS实现自动变换的菜单效果代码

    JS实现自动变换的菜单效果代码

    这篇文章主要介绍了JS实现自动变换的菜单效果代码,可实现自动变换菜单选中项的技巧,涉及JavaScript定时函数触发页面样式属性变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JS随机洗牌算法之数组随机排序

    JS随机洗牌算法之数组随机排序

    这篇文章主要介绍了JS随机洗牌算法之给数组随机排序的相关资料,需要的朋友可以参考下
    2016-03-03
  • 10个必备的JavaScript async/await工具函数分享

    10个必备的JavaScript async/await工具函数分享

    当谈到异步编程时,async/await是JavaScript中常用的功能之一,本文为大家整理了10个常用的await和async函数示例,感兴趣的小伙伴可以参考一下
    2023-12-12
  • javascript实现tab切换的四种方法

    javascript实现tab切换的四种方法

    这篇文章主要为大家详细介绍了javascript实现tab切换的四种方法,并且对每个方法进行了评价,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 前端实现文件下载常见的几种方法总结

    前端实现文件下载常见的几种方法总结

    这篇文章主要给大家介绍了关于前端实现文件下载常见的几种方法,需要的朋友可以参考下
    2025-01-01
  • JavaScript识别网页关键字并进行描红的方法

    JavaScript识别网页关键字并进行描红的方法

    这篇文章主要介绍了JavaScript识别网页关键字并进行描红的方法,通过字符串的遍历、匹配及动态添加等操作实现识别与描红的功能,非常简单实用,需要的朋友可以参考下
    2015-11-11
  • 前端实现时钟网页的详细代码示例

    前端实现时钟网页的详细代码示例

    本文介绍了如何在网页中实现一个动态显示的时钟,并且添加了白天和夜晚两种模式的切换功能,通过简单的HTML结构和JavaScript代码,使用Date()函数动态获取当前的时间,并将时、分、秒通过逻辑绑定到相应的div元素上,实现时钟的动态显示,需要的朋友可以参考下
    2024-09-09
  • js实现自定义下拉框

    js实现自定义下拉框

    这篇文章主要为大家详细介绍了js实现自定义下拉框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • JavaScript知识点总结(十)之this关键字

    JavaScript知识点总结(十)之this关键字

    这篇文章主要介绍了JavaScript知识点总结(十)之this关键字的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05

最新评论