首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取鼠标当前位置坐标

2017-03-01 10:08:42 在页面中获取鼠标坐标通常有三种方式,这三种方式各有不同,所的的值也是不一样的。  首先是相对于页面的pageX和pageY。...它指的是鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。...他值的是鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化。 相对于屏幕来说的screenX/screenY。...鼠标在屏幕上的位置,从屏幕左上角开始(w3c标准) 相较于触发事件的offsetX/offsetY。...完全支持所有属性.其中(offsetX和layerX都是以border为参考点) 下面这个是获取相对于屏幕的坐标 document.onmousemove = function(e) { e =

14.7K20

获取图片位置(距离最顶部)

老规矩,先说需求: 需求是想要获取图片位置,然后根据图片位置添加一个按钮 点击这个按钮 获取图片的信息 正常来讲 这样的需求 先获取dom 再遍历dom 往里面塞按钮就可以了 但是,考虑到各型各色的网站限制和...dom变化,这样就有很多问题, 所以就需要根据图片的当前位置(元素距离顶部的位置(包括滚动条),和左边的位置)来动态的添加这个按钮 因为是hover触发的 所以这个按钮只有一个 (这样的做法是参考阿里以图搜图的功能做的...) ok 需求明白了之后 开始说怎么做 先说公式代码:( top: 图片距离顶部的高度+滚动条的高度,left:图片距离左侧的高度) 1.滚动条的高度     // 获取 当前 滚动条的长度, 水平 ...、左的距离:(主要方法:dom.getBoundingClientRect)       // 获取 dom 到视口左侧和顶部的相对位置       function getDomToViewPosition...+266.515625 = 4949.515625 left:20 接下来验证是否正确,方法就是看一下阿里以图搜图的按钮位置图片 OK 几乎一样 验证成功,下课 附上参考的文档:https://

2K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS获取图片原始宽高

    最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实宽高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小...,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度 也就是说如果图片原始大小1200,使用css或者width属性设置为600,那么这里拿到的宽度为600,显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...document.createElement("img") img.src = "1.jpg" var width = img.width 动态创建一个imgElement,通过给src赋值,最终来获取...img的宽和高 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement

    6.3K20

    JS获取图片中随机一点颜色

    实现效果 昨天泽泽分享了一篇有意思的文章:纯CSS根据图片取色设置背景色,主要分享了一个就是div嵌套img的时候,如何实现div的颜色为img中一点的颜色。...如下图所示,在PS中打开一张图片,如果将这张图片一直放大,具体到每个像素点,会发现图片单个像素点内的颜色值都是唯一的。...实现效果 有了具体的思路了就是如何实现了,因为我这个页面是前后端渲染的动态页面,改PHP代码的话有点麻烦,所以我就考虑从前端入手,使用JQuery来实现: 获取每一个友链链接.board-item; 然后通过显示迭代获取每一个友链中的背景图...; 然后将下方文字的背景图设置为获取的背景图地址,同时,使用Math.random()产生一个随机数,这样的话就可以实现对图片中随机一点进行取色,且每次刷新都会产生不一样的效果。...text-align:center; } span { color:red; } <script src="https://code.jquery.com/jquery-latest.<em>js</em>

    3.8K30
    领券