网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
function getmXY(e){//鼠标位置
if(!document.all){
this.x=e.pageX;
this.y=e.pageY;
}else{
this.x=document.body.scrollLeft+event.clientX;
this.y=document.body.scrollTop+event.clientY;
};
//滚动高度
if (self.pageYOffset) {
this.yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
this.yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
this.yScroll = document.body.scrollTop;
};
//视窗尺寸
if (self.innerHeight) { // all except Explorer
this.winWidth = self.innerWidth;
this.winHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
this.winWidth = document.documentElement.clientWidth;
this.winHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
this.winWidth = document.body.clientWidth;
this.winHeight = document.body.clientHeight;
};
};
function getwininfo(e){
var windowinfo = new getmXY(e);
window.status = “鼠标X:”+windowinfo.x+“鼠标Y:”+windowinfo.y+“窗口宽:”+windowinfo.winWidth+“窗口高:”+windowinfo.winHeight+“滚动高度:”+windowinfo.yScroll;
};
分享到:
相关推荐
### JavaScript窗口宽高、鼠标位置、滚动高度详细解析 #### 一、概述 在Web开发中,经常需要获取浏览器窗口的尺寸、鼠标的位置以及页面滚动的距离等信息。这些信息对于响应式设计、交互效果实现等方面至关重要。本...
1. **窗口宽高**: - `window.innerWidth` 和 `window.innerHeight` 分别用于获取浏览器窗口的可视区域宽度和高度,包括工具栏和滚动条。 - `document.body.clientWidth` 和 `document.body.clientHeight` 提供的...
在JavaScript中,获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求,这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先,我们需要理解两个基本概念:`event.clientX` 和 `event....
- 获取窗口的宽高、鼠标位置以及滚动条信息。 - 使用DIV模拟弹出窗口,并使其在页面滚动时保持可见。 总的来说,JavaScript的滚动窗口实现涉及了浏览器窗口操作、事件监听、定时器以及动态效果的创建。这些知识点...
【JavaScript DOM位置、大小、鼠标定位操作】是Web开发中不可或缺的部分,JavaScript提供了丰富的属性用于操作DOM元素的位置、尺寸以及获取鼠标位置。了解并熟练掌握这些属性有助于提高开发效率和编写高质量的Web...
综上所述,实现“鼠标滚动div内容”涉及到CSS布局、JavaScript事件监听和DOM操作等多个方面。开发者需要理解这些基础知识,并结合实际项目需求进行灵活应用。通过不断学习和实践,可以创建出更加生动、交互性强的...
在JavaScript中,实现一个div元素随鼠标滚动条滚动的效果,主要涉及到两个关键概念:事件监听和CSS定位。这个效果常用于创建固定定位的侧边栏、头部导航等元素,即使页面滚动,它们仍然保持在视口中的特定位置。 ...
Javascript 元素位置、大小、鼠标定位操作 本文将详细介绍 Javascript 中元素位置、大小、鼠标定位操作相关的知识点,包括事件对象、DOM 对象、Style 对象等提供的相关属性和方法。 一、事件对象 Event 事件对象 ...
同时,`offsetWidth`和`offsetHeight`提供了元素自身的宽高,包括内边距但不包含边框。 此外,`scrollHeight`、`scrollLeft`、`scrollTop`和`scrollWidth`则与元素的滚动有关。`scrollHeight`表示元素的滚动高度,...
// 初始化滚动位置 var scrollTop = 0; // 设置定时器 var timer; // 监听鼠标事件 scrollElement.addEventListener('mouseover', function() { clearInterval(timer); // 停止滚动 }); scrollElement....
同时,为了实现自适应屏幕,我们需要检测窗口的大小,并根据窗口的宽度和高度调整菜单的布局和滚动速度。 另外,`jquery.mousewheel.js`是jQuery的一个插件,它扩展了jQuery的事件处理能力,提供了对鼠标滚轮事件的...
- `document.body.scrollLeft` 和 `document.body.scrollTop`:表示文档的滚动位置。 - `document.body.clientLeft` 和 `document.body.clientTop`:表示浏览器视口的边框宽度。 ##### 3. 兼容性处理 由于不同的...
这可以通过计算广告元素相对于窗口的位置和窗口的滚动位置来实现。jQuery提供了`$(element).offset()`和`$(window).scrollTop()`等方法来获取这些信息。 广告的弹性效果通常通过CSS3的`transition`属性实现,它可以...
在"js鼠标滚动自动隐藏导航菜单"的设计中,主要涉及以下JavaScript知识点: 1. **DOM操作**:DOM(Document Object Model)是HTML和XML文档的结构化表示,JavaScript通过DOM可以访问和修改页面元素。在这个例子中,...
接着,我们来构建这个跟随鼠标滚动的菜单。菜单通常由HTML结构定义,可能包括多个`<li>`元素,这些元素包含链接或者其他交互元素。HTML代码示例如下: ```html <li><a href="#">菜单1</a></li> <li><a href="#...
在网页设计中,有时我们需要创建一种效果,使得某些元素如客服图标或浮动菜单在用户滚动页面时始终保持在屏幕的特定位置。这个需求可以通过纯CSS来实现,无需借助JavaScript或者其他复杂的技术手段。标题“纯css控制...
【标题】"鼠标滚动事件动画.zip"所包含的知识点主要集中在JavaScript(JS)与jQuery库的应用上,特别是针对用户交互的响应式设计和动画效果的实现。在这个项目中,开发者利用了jQuery的事件监听和CSS3的动画特性,...
2. **计算滚动位置**:当事件触发时,JavaScript将计算当前的滚动位置,以便更新滚动条的状态。 3. **更新样式**:根据计算出的滚动位置,JavaScript会动态修改滚动条及关联元素的CSS样式,使其与实际滚动保持一致。...
标题中的“JQuery 随鼠标滚动条滚动的div”是指使用JQuery库来实现一个功能,即当用户滚动页面时,某个特定的div元素会跟随滚动条一起移动。这个功能在网页设计中常见于侧边栏菜单、广告条或者固定导航栏等,目的是...