多瀏覽器支持的右下角浮動窗口

更新時間：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代碼，下面是浮動的窗口

復(fù)制代碼代碼如下:

 
<div style='position:absolute;top:0;left:0;width:300px;height:180px;border:3px double #AAA' id='msgtip'>dfddfdf</div> 

您可能感興趣的文章:

相關(guān)文章

js實現(xiàn)詳情頁放大鏡效果
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)詳情頁放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
JS實現(xiàn)自動變換的菜單效果代碼
這篇文章主要介紹了JS實現(xiàn)自動變換的菜單效果代碼,可實現(xiàn)自動變換菜單選中項的技巧,涉及JavaScript定時函數(shù)觸發(fā)頁面樣式屬性變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
JS隨機(jī)洗牌算法之?dāng)?shù)組隨機(jī)排序
這篇文章主要介紹了JS隨機(jī)洗牌算法之給數(shù)組隨機(jī)排序的相關(guān)資料,需要的朋友可以參考下
2016-03-03
10個必備的JavaScript?async/await工具函數(shù)分享
當(dāng)談到異步編程時,async/await是JavaScript中常用的功能之一,本文為大家整理了10個常用的await和async函數(shù)示例,感興趣的小伙伴可以參考一下
2023-12-12
javascript實現(xiàn)tab切換的四種方法
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)tab切換的四種方法，并且對每個方法進(jìn)行了評價，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-11-11
前端實現(xiàn)文件下載常見的幾種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)文件下載常見的幾種方法,需要的朋友可以參考下
2025-01-01
JavaScript識別網(wǎng)頁關(guān)鍵字并進(jìn)行描紅的方法
這篇文章主要介紹了JavaScript識別網(wǎng)頁關(guān)鍵字并進(jìn)行描紅的方法,通過字符串的遍歷、匹配及動態(tài)添加等操作實現(xiàn)識別與描紅的功能,非常簡單實用,需要的朋友可以參考下
2015-11-11
前端實現(xiàn)時鐘網(wǎng)頁的詳細(xì)代碼示例
本文介紹了如何在網(wǎng)頁中實現(xiàn)一個動態(tài)顯示的時鐘,并且添加了白天和夜晚兩種模式的切換功能,通過簡單的HTML結(jié)構(gòu)和JavaScript代碼,使用Date()函數(shù)動態(tài)獲取當(dāng)前的時間,并將時、分、秒通過邏輯綁定到相應(yīng)的div元素上,實現(xiàn)時鐘的動態(tài)顯示,需要的朋友可以參考下
2024-09-09
js實現(xiàn)自定義下拉框
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)自定義下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
JavaScript知識點總結(jié)(十)之this關(guān)鍵字
這篇文章主要介紹了JavaScript知識點總結(jié)(十)之this關(guān)鍵字的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-05-05