`
该用户名已经存在
  • 浏览: 307809 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Javascript 获取页面元素相对于电脑屏幕的坐标

阅读更多
这个没什么可说的,直接上代码,有需要的可以参考一下:
//获取元素绝对位置
function getAbsPosition(element)
{
    var abs={x:0,y:0}
	
    //如果浏览器兼容此方法
    if (document.documentElement.getBoundingClientRect) 
    {             
        //注意,getBoundingClientRect()是jQuery对象的方法
        //如果不用jQuery对象,可以使用else分支。
        abs.x = element.getBoundingClientRect().left;         
        abs.y = element.getBoundingClientRect().top;
		
        abs.x += window.screenLeft +  
                    document.documentElement.scrollLeft -            
                    document.documentElement.clientLeft;
        abs.y += window.screenTop +  
                    document.documentElement.scrollTop -  
                    document.documentElement.clientTop;
		
    } 
	
    //如果浏览器不兼容此方法
    else
    {
        while(element!=document.body)
        {
            abs.x+=element.offsetLeft;
            abs.y+=element.offsetTop;
            element=element.offsetParent;
        }
		
     //计算想对位置
     abs.x += window.screenLeft + 
            document.body.clientLeft - document.body.scrollLeft;
     abs.y += window.screenTop + 
            document.body.clientTop - document.body.scrollTop;
		
    }
	
    return abs;
}
1
3
分享到:
评论

相关推荐

    JavaScript第九天.xmind

    4.offsetX,offsetY(鼠标相对于事件源元素的x,y坐标) 元素的offset属性: 1.offsetTop: 元素相对父元素上边的偏移。(只读) 2.offsetLeft: 元素相对父元素左边的偏移。(只读) 3.offsetWidth: 自身包括padding...

    【JavaScript源代码】javascript实现跟随鼠标移动的图片.docx

    此外,还有其他属性如 `e.clientX` 和 `e.clientY`,它们表示相对于浏览器窗口可视区的坐标,以及 `e.screenX` 和 `e.screenY`,它们是相对于电脑屏幕的坐标。 3. **设置图片位置**: 为了让图片跟随鼠标移动,...

    JavaScript中获取鼠标位置相关属性总结

    screenX和screenY属性表示鼠标指针相对于电脑屏幕左上角的坐标。这些属性与document没有直接关系,它们是独立于文档的。screenX和screenY在所有浏览器中都是支持的。 3. pageX和pageY属性 pageX和pageY属性表示鼠标...

    3D照片墙图片展示代码.zip

    首先,这个3D照片墙的实现主要基于JavaScript(JS)语言,特别是利用了其强大的DOM操作能力以及对网页元素动态变换的支持。JavaScript特效是网页开发中的重要组成部分,它能够使网页变得更加生动有趣,提高用户体验...

    网站qq悬浮联系实列

    一般会使用绝对定位(`position: absolute`)使其脱离文档流,并设置相对于视口(`top`、`right`、`bottom`、`left`)的坐标,确保它始终在可视区域中。当页面滚动时,通过JavaScript改变这些坐标值。 3. **HTML...

    仿QQ相册前一张后一张图片查看代码

    2. **鼠标位置检测**:在处理函数内部,我们需要获取鼠标相对于图片的位置。JavaScript的`event`对象提供了`clientX`和`clientY`属性,它们分别表示鼠标在页面中的水平和垂直坐标。结合图片元素的尺寸和位置,可以...

    html 响应式 滑动悬浮球(手机端演示)

    `,这使得元素相对于浏览器窗口固定,即使滚动页面也会保持在屏幕的某个位置。为了实现滑动效果,可能需要用到JavaScript或者jQuery来监听触摸事件,如`touchstart`、`touchmove`和`touchend`。当检测到这些事件时,...

    3D相册房间

    6. **响应式设计**:考虑到不同设备的屏幕尺寸和方向,3D相册应具备响应式设计,确保在手机、平板和电脑上都能良好运行。 7. **性能优化**:大量的3D操作可能会对浏览器性能造成影响,因此需要优化代码,如使用GPU...

    樱花雨3d魔方旋转相册

    6. **响应式设计**: 为了适应不同设备的屏幕尺寸和方向,樱花雨3D魔方旋转相册可能采用了响应式设计,通过媒体查询(media queries)和流式布局确保在手机、平板和桌面电脑上都有良好的用户体验。 7. **数据结构与...

    毕设&课设&项目&实训-《网页设计与地图应用》写的辣鸡代码.zip

    在本项目《网页设计与地图应用》中,我们主要探讨了如何将网页设计技术与地图应用相结合,创建出具有互动性和实用性的网络平台。虽然描述中提到这些代码是"辣鸡代码",但它们仍然能为我们揭示一些重要的知识点。下面...

    js仿360桌面悬浮球拖拽到边缘自动贴边特效.zip

    1. **CSS3定位技术**:悬浮球的定位通常会用到绝对定位(`position: absolute`),这允许元素相对于最近的非静态定位祖先元素进行定位。当球体靠近页面边缘时,我们需要通过JavaScript来实时调整其位置,使其贴边。 ...

    基于JS实现的使用视差滚动写的母亲节祝福.zip

    视差滚动(Parallax Scrolling)是网页设计中的一种流行特效,它通过让背景图像以不同的速度相对于前景元素移动,创造出深度感和立体感,从而提升用户体验。这种技术常用于讲述故事、展示产品或创造沉浸式浏览环境的...

    点击图片上的窗口实现图片的缩放效果

    2. **坐标转换**:当用户点击图片时,我们需要获取点击位置相对于图片左上角的坐标。这些坐标将用于确定要放大显示的图片部分。 3. **图像处理**:点击后,我们需要对图片进行裁剪并放大。这涉及到图像处理技术,...

    html5罗盘时钟.zip

    这个创新的设计将传统的罗盘元素与现代网页技术相结合,创造出一个既实用又具有视觉吸引力的时钟组件。接下来,我们将深入探讨HTML5罗盘时钟涉及的主要技术点、实现原理以及如何运用这些知识点。 1. **HTML5 Canvas...

    layout.ziplayout

    相对定位保留了元素的原始流位置,而绝对定位则将其从正常流中移除,根据相对于最近非static定位祖先的坐标进行定位。 8. **浮动布局(Float Layout)**:在早期网页设计中,`float`属性常用于创建多列布局,但如今...

    纯js全国地图+提示(鼠标移上)

    此外,CSS还可以用于设置提示框的位置,使其总是相对于鼠标有一个固定偏移。 6. **响应式设计**:为了适应不同屏幕尺寸和设备,这个项目可能还采用了响应式设计,确保地图在手机、平板电脑和桌面电脑上都能正常显示...

    jQuery 相册圈人

    8. **响应式设计**:为了适应不同设备和屏幕尺寸,确保相册圈人在手机、平板和电脑上都能良好工作,需要进行响应式布局调整。 通过以上步骤,我们可以构建出一个功能完善的jQuery相册圈人功能。值得注意的是,实际...

    淘宝图片放大镜效果

    具体来说,可以计算出鼠标相对于图片左上角的坐标,然后根据这个比例来确定放大图片显示的区域。 4. **事件处理**:JavaScript中的`onmousemove`事件用于捕获鼠标移动的动作。每次鼠标移动,都会触发事件处理函数,...

    document-create-touch-list.rar_touch

    3. `screenX` 和 `screenY`:触摸点在屏幕坐标系的位置。 4. `clientX` 和 `clientY`:触摸点在浏览器视口内的位置。 5. `pageX` 和 `pageY`:触摸点相对于整个HTML文档的位置。 6. `radiusX` 和 `radiusY`:触摸的...

Global site tag (gtag.js) - Google Analytics