`

js中获取各种窗口的大小和鼠标坐标

 
阅读更多

网页可见区域宽: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.availWidthvar t="";

获取鼠标位置:

event.clientX 为鼠标距浏览左面边缘的距离, event.clientY 为 鼠村距网页上方边缘的距离,但定位不光这样就行了,需要考虑到当前网页坐标并不是鼠标的位置(例如把网页滚动条拖到最右下方),所以我们需要加上下面的内容:

var x = event.clientX + document.body.scrollLeft;

var y = event.clientY + document.body.scrollTop;

注 意,在使用了W3C标准的网页中,document.body.scrollTop和document.body.scrollLeft会失效,这时要用 document.documentElement.scrollTop 和document.documentElement.scrollLeft。否则 scroll 所取出来的值一律为0

分享到:
评论

相关推荐

    【JavaScript源代码】JavaScript offset实现鼠标坐标获取和窗口内模块拖动.docx

    JavaScript offset实现鼠标坐标获取和窗口内模块拖动  offset 即偏移量,使用 offset 系列相关属性可以 动态的 获取该元素的位置(偏移)、大小等,如: 元素距离带有定位父元素的位置 获取元素自身的大小(宽度...

    js 实现 状态栏显示鼠标位置

    js 实现 状态栏显示鼠标位置! 值得下载看看!资源免费,大家分享!!

    JS实现十字坐标跟随鼠标效果

    本次小编给大家带来一个JS的效果,实现根据浏览器的窗口大小出现十字坐标并跟随鼠标移动的效果,还可以计算出实时的坐标数值。 我们先来看一下运行后的效果图: 以下是经过小编测试后的全部代码: <!DOCTYPE ...

    百度地图api实现部分功能,根据多个坐标连成轨迹、坐标拾取、实现多个标注点并带信息窗口

    百度地图api实现部分功能,根据多个坐标连成轨迹、坐标拾取、实现多个标注点并带信息窗口

    详解JavaScript中的坐标和距离

    在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少时间精力,于是便有了整理记录的想法,即加深了印象,又方便随时...

    【JavaScript源代码】JavaScript实现浏览器网页自动滚动并点击的示例代码.docx

    JavaScript实现浏览器网页自动滚动并点击的示例代码  1. 打开浏览器控制台窗口 ...2. 实时查看鼠标坐标 首先为了获取当前的鼠标位置的x、y坐标,需要先重写一个onmousemove函数来帮助我们实时查看光标处的x、

    javascript event 用法

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动...

    JS网页在线获取鼠标坐标值的方法

    主要介绍了JS网页在线获取鼠标坐标值的方法,涉及javascript操作页面窗口位置元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    javascrtpt 实现窗口拖拽、移动功能、显示坐标

    javascrtpt 实现窗口拖拽、移动功能、显示坐标代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head runat...

    Javascript 获取鼠标当前的位置实现方法

    有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1、客户区坐标位置  鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置...

    javascript 事件对象 坐标事件说明

    测试浏览器的版本: IETester 6 ,7 IE 8.0 Firefox 3.5.5 Chrome 4.1.249.1064 (45376) Opera 9.64 ... event.clientX event.clientY 总是相对于视口 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域

    程序天下:JavaScript实例自学手册

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    JavaScript网页特效范例宝典源码

    实例289 在状态栏显示鼠标坐标 454 实例290 在状态栏显示特定的超级链接信息 456 第11章 报表与打印 459 11.1 Web打印 460 实例291 调用IE自身的打印功能实现打印 460 实例292 打印指定框架中的内容 461 实例293 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    JavaScript实用范例词典04-14

    5.23 双击鼠标滚动窗口/单击鼠标停止 滚动... 126 5.24 去掉窗口滚动条... 127 5.25 让滚动条在窗口左边出现... 128 5.26 改变窗口滚动条的样式... 129 5.27 不能最小化的窗口... 130 5.28 改变在浏览器地址栏...

    js仿百度登录页实现拖动窗口效果

    在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动;那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了;首当其冲的,要涉及到鼠标的三...

    aui-artDialog

    功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤…… 优点 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, ...

    JavaScript详解(第2版)

     13.7.5 鼠标坐标   13.7.6 按键事件   13.8 处理事件的脚本模型   13.9 应知应会   练习   第14章 CSS与JavaScript   14.1 什么是CSS   14.2 什么是样式表   14.2.1 什么是兼容CSS的...

    javascript函数的解释

    72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener...的多重继续. 73.JS中的self指的是当前的窗口 74.JS中状态栏显示内容:window.status="内容" 75.JS中的top指的是框架集中最顶层的框架 76.JS中...

    js图片跟随鼠标移动代码

    我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只能get,不能set),说到这里可能很多童鞋已经...

Global site tag (gtag.js) - Google Analytics