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

获取图片的位置(距离顶部

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

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

js获取各种距离和宽高

鼠标event事件 属性 说明 offsetX 以当前的元素的左上角为原点, 距离元素顶部距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX 以浏览器窗口(...视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口(视口)的左上角为原点, 距离视口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点, 距离页面顶部距离..., 随页面滚动而改变 pageY 以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部距离 screenY 以计算机显示屏屏幕左上角为原点...'px', 为字符串类型) 距离 属性 说明 offsetTop/Left 元素距离最近的带有定位(fixed/relative/absolute)的父元素的顶部/左侧的距离 scrollTop/Left...此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离,也就是元素滚动条被向下/向右拉动的距离

7610

前端性能优化之防抖与节流,大幅度降低你的事件处理性能

但是我们的目的可能只是想获得滚动停下来以后导航栏距离文档顶部距离, 我们并不需要滚动停止前那过程中变化的距离, 如果一直在滚动时去获取距离,这非常影响性能,这是我们就需要用到 防抖和节流了。...那么‘ 跑步 ’ 这个动作就可以看作我们上述代码中的滚动事件, ’ 擦汗 ’ 就可以看成scroll 事件的处理代码,即获取导航栏离文档顶部距离。...那么防抖,就是我们滚动页面,刚要获取导航栏离文档顶部距离,但是发现等会还要继续滚动,那么就先不获取了,等什么时候停止滚动了,再获取这个距离。...这里我们同样把 ’ 跑步 ’ 看作是 滚动页面的操作, 把 ’ 擦汗 ’ 看作是获取导航栏离文档顶部距离的操作。...那么,节流就是, 我们滚动页面,获取了一下导航栏离文档顶部距离, 此时我们一直在滚动页面, 只不过我们刚获取距离了,就先不获取了, 等距离上一次获取几秒后,我们再获取一次吧。

1.5K20

android获取附近蓝牙设备并计算距离的实例代码

需要用到本地蓝牙适配器 // 获取本地蓝牙适配器 mBluetoothAdapter = BluetoothAdapter.getDefaultAdapter(); 判断是否支持蓝牙,并确认打开该功能。...// 获取已经配对的设备 Set<BluetoothDevice pairedDevices = mBluetoothAdapter .getBondedDevices(); // 判断是否有配对过的设备...intent.getAction(); // 发现设备的广播 if (BluetoothDevice.ACTION_FOUND.equals(action)) { // 从intent中获取设备...intent.getExtras().getShort( BluetoothDevice.EXTRA_RSSI); int iRssi = abs(rssi); // 将蓝牙信号强度换算为距离...android.permission.ACCESS_COARSE_LOCATION" / <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" / 以上这篇android获取附近蓝牙设备并计算距离的实例代码就是小编分享给大家的全部内容了

2K10

图解浏览器的各种距离

事件对象可以拿到 pageY、clientY、offsetY,分别代表到点击的位置到文档顶部,到可视区域顶部,到触发事件的元素顶部距离。 还有个 screenY,是拿到到屏幕顶部距离。...获取,那元素也有滚动条呢?...元素内容的滚动距离用 element.scrollTop 获取。...这里 clientY 和 getBoundingClientRect().top 也要区分下: 一个是元素距离可视区域顶部距离,一个是鼠标事件触发位置到可视区域顶部距离。...这类属性比较多,我们整体过了一遍: e.pageY:鼠标距离文档顶部距离 e.clientY:鼠标距离可视区域顶部距离 e.offsetY:鼠标距离触发事件元素顶部距离 e.screenY:鼠标距离屏幕顶部距离

6910
领券