<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>
页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div style='position:absolute;top:0;left:0;width:300px;height:180px;border:3px double #AAA' id='msgtip'>dfddfdf</div>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>
</html>
<!-- 可以根据自己需求，更改浮动位置，记得把JS放进来。-->
分享到：
相关推荐
本文将深入探讨如何使用jQuery实现一个兼容多种浏览器的弹出浮动层，同时具备可拖动和透明度调整功能。 首先，让我们从标题开始。"jQuery 弹出浮动层"指的是在网页上创建一个可以浮动且能在页面上任意位置显示的...
在网页开发中，创建一个兼容各种浏览器的可关闭浮动层是一项常见的需求，它可以在页面上显示重要的消息、提示或者广告，同时允许用户根据需要关闭它。这个“兼容各种浏览器的可关闭的浮动层”项目正是为了解决这个...
此源码的核心特点是兼容所有浏览器，包括对IE6的特殊处理，使用了CSS的`fixed`定位技术来实现页面上的悬浮效果。 `fixed`定位是CSS布局中的一种，它可以使元素相对于浏览器窗口定位，即使在滚动页面时，元素的位置...
本文将详细介绍如何使用兼容各大浏览器的浮动广告JS代码，以及如何实现这一功能。 首先，我们需要理解浮动广告的基本概念。浮动广告是指在网页浏览过程中始终位于屏幕特定位置（如屏幕边缘）的广告元素，即使用户...
- **跨浏览器兼容性**：不同的浏览器可能对CSS和JavaScript的某些特性支持不一，开发时需要考虑兼容性问题。 4. **相关技术**： - **Vue.js, React.js, Angular** 等前端框架提供了更便捷的方式创建和管理浮动...
同时，为了兼容不同的浏览器和设备，需要进行跨平台优化，确保在PC和移动设备上都能正常工作。 QQ在线客服系统还提供了多种高级功能，例如客服分配机制，根据用户问题类型或优先级自动分配合适的客服；历史对话记录...
开发者需要使用polyfills或条件语句来确保代码在所有目标浏览器上都能正常运行。 6. **文件保存**： `file-saver`库可以用来在用户本地保存生成的Excel文件。通过创建一个`Blob`对象并调用`saveAs`函数，可以在...
8. **兼容性测试**：在不同操作系统、浏览器和设备上进行广泛的测试，以确保浮动窗口在各种环境下的稳定性和一致性。 9. **自定义配置**：允许用户根据个人喜好调整浮动窗口的位置、大小、透明度等，提高用户体验。...
在这个在线客服系统中，`index.html`可能包含了客服按钮或浮动窗口的HTML代码，用户可以通过点击这些元素与客服人员进行交谈。 其次，CSS（层叠样式表）在`style`目录下，负责定义页面的外观和布局。为了让在线客服...
在本案例中，我们讨论的是一个兼容性极佳的网页浮动飘窗，它能够正常工作在多种浏览器环境下，包括较旧版本的Internet Explorer（如ie7/8/9/10）以及Firefox等现代浏览器。 首先，我们要理解“飘窗”这个概念。网页...
**解决方案**: 在所有浏览器中统一使用 `var` 关键字定义常量，避免兼容性问题。 ##### 3. event.x与event.y问题 - **IE**: 提供 `event.x` 和 `event.y` 属性，但无 `pageX` 和 `pageY`。 - **Firefox**: 提供 `...
在JavaScript（简称JS）编程中，创建一个可移动、可关闭且带有灰化背景的浮动窗口是一项常见的需求，尤其在用户...在实际应用中，可能还需要考虑浏览器兼容性、窗口大小调整、动画效果等因素，以提供更佳的用户体验。
为了让效果在不同浏览器间保持一致，我们需要考虑浏览器之间的兼容性问题，尤其是对于老版本的IE浏览器。 1. **HTML结构**： 创建一个包含QQ号码的div元素，作为漂浮客服的容器。例如： ```html 您的QQ号码&...
综上所述，这段代码的主要功能是创建一个能在用户滚动页面时始终显示在右下角的浮动窗口，同时考虑了各种浏览器的兼容性问题。这种设计常见于网站的通知提示、广告或其他需要保持可视的交互元素。
6. **浏览器兼容性**：考虑到不同的用户可能使用不同的浏览器，开发团队需要确保这个浮动窗口和关闭功能在主流浏览器中都能正常工作，包括Chrome、Firefox、Safari和Edge等。 7. **响应式设计**：随着移动设备的...
在本示例中，我们关注的是一个使用jQuery库来实现的特定交互效果——"jQuery右击logo弹出浮动窗口"。这个效果允许用户在右键点击网站logo时，弹出一个浮动窗口，通常用于显示注册或登录选项。下面将详细讨论实现这一...
3. **事件监听**：浮动窗口需要监听浏览器的滚动事件，以便在用户滚动页面时实时调整窗口的位置。 4. **CSS样式控制**：JavaScript通常会配合CSS（层叠样式表）来定义浮动窗口的外观，如大小、颜色、边框、透明度等...
为了确保在所有主流浏览器（如Chrome, Firefox, Safari, Edge, 和旧版IE）中正常显示，我们需要使用polyfills（如autoprefixer）或者条件注释来添加兼容性代码。例如，对于不支持CSS Grid的浏览器，可以回退到使用...