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

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

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

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

    JavaScript与jQuery获取元素的宽、高和位置

    注意:right 是指元素右边窗口最左边的距离,bottom 是指元素下边界窗口最上面的距离。...可视宽高 clientHeight :元素的可视高度(包括内边,不包括边框、外边滚动条) clientWidth :元素的可视宽度(包括内边,不包括边框、外边滚动条) 自身宽高 offsetHeight...) scrollWidth :元素的整个宽度(包括带滚动条的隐蔽的地方) 鼠标滚动距离 scrollLeft :是该元素的显示(可见)的内容上边与该元素实际的内容的距离滚动条滚去的宽度) scrollTop...:是该元素的显示(可见)的内容与该元素实际的内容的距离滚动条滚去的高度) jQuery中: ?...$(document).scrollTop() :document 元素相对 document 元素对应的滚动条顶部的垂直偏移量,可获取已滚动的距离或设置将要滚动的距离

    3K00

    Selenium及python实现滚动操作多种方法

    方法一:使用js脚本直接操作 # 滚动到顶部 def scroll_top(self): if self.driver.name == "Chrome": js = "var q...=10000″ driver.execute_script(js) 这里的id为滚动条的id,但js中没有xpath的方法,所以滚动条没有id的网页此方法不适用 上面展示的是上下方向的滚动条,接下来介绍左右方向的滚动条的操作方法...#左右方向的滚动条可以使用window.scrollTo(左边,上边)方法 #example js=”window.scrollTo(200,1000)” driver.execute_script...–scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 –scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。...(js) #滚动到顶部 js = "window.scrollTo(0,0)" driver.execute_script(js) 其他: robotframe work框架中,selenium2library

    6.1K21

    js获取各种距离和宽高

    document 可视区域 document.documentElement.offsetHeight(不包括外边) document.documentElement.clientHeight-浏览器窗口的可见区域...鼠标event事件 属性 说明 offsetX 以当前的元素的左上角为原点, 距离元素顶部距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX 以浏览器窗口(...视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口(视口)的左上角为原点, 距离视口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点, 距离页面顶部距离..., 随页面滚动而改变 pageY 以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部距离 screenY 以计算机显示屏屏幕左上角为原点...此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离,也就是元素滚动条被向下/向右拉动的距离

    22110

    彻底玩转图片懒加载及底层实现原理

    基于原生 js 实现图片懒加载 相关 API 先来看几个后面会用到的API document.documentElement.clientHeight 获取屏幕可视区域的高度。 ?...“图片来源MDN[1] element.offsetTop 获取元素相对于文档顶部的高度。 ?...“图片来源阮一峰博客[2] document.documentElement.scrollTop 获取浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离。 ?...“图片来源Seven's Blog 思路分析 通过上面三个 API,我们获得了三个值:可视区域的高度、元素相对于其父元素容器顶部距离、浏览器窗口顶部与容器元素顶部距离也就是滚动条滚动的高度。...right是指元素右边窗口最左边的距离,bottom是指元素下边界窗口最上面的距离。 ?

    92631

    动手练一练,手写一个价格对比、固定表头滚动的表格

    scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。...offsetTop:当前元素顶部距离最近父元素顶部距离,和有没有滚动条没有关系。单位px,只读元素。...right是指元素右边窗口最左边的距离,bottom是指元素下边界窗口最上面的距离。...获取表格的 offsetWidth 宽度 获取表格距离视口顶部距离(getBoundingClientRect().top) 获取表头的 offsetHeight 高度 基于这些我们定义相关的变量,...获取用户从视口顶部滚动的距离(pageYOffset) 获取最后一部分内容区域距离窗口顶部的高度(getBoundingClientRect().top) 检测滚动条是否滚动到表格区域。

    3.2K31

    详解各种获取元素宽高及位置的属性

    offsetParent = element.offsetParent; offsetTop HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部距离...clientTop / clientLeft clientTop Element.clientTop 是一个只读属性,表示一个元素顶部边框的宽度(以像素表示)。不包括顶部外边或内边。...如果元素的文本方向是从右向左(RTL, right-to-left),并且由于内容溢出导致左边出现了一个垂直滚动条,则该属性包括滚动条的宽度。clientLeft 不包括左外边和左内边。...一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。...scrollLeft Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离

    3.9K80

    小程序开发基础-scroll-view 可滚动视图区域

    scroll scroll-view属性表格 属性名 说明 scroll-x 表示允许横向滚动 scroll-y 表示允许纵向滚动 upper-threshold 表示顶部或者左边多远时...(单位为px),触发scrolltoupper事件 lower-threshold 表示底部或者右边多远时时(单位为px),触发scrolltolower事件 scroll-top 表示设置竖向滚动条位置...表示在设置滚动条位置时使用动画过渡 bindscrolltoupper 表示滚动到顶部或左边,会触发scrolltoupper事件 bindscrolltolower 表示滚动到底部或右边,会触发scrolltolower...事件 bindscroll 表示滚动时触发 enable-back-to-top 表示iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向 class="scroll-view-item...,upper为滚动条滚到顶部的时候触发,lower为滚动条滚到底部的时候触发,scroll为滚动条滚动后触发,tap为点击按钮切换到下一个view,tapMove为通过设置滚动条位置实现画面滚动。

    2.4K40

    js、jQuery 获取文档、窗口、元素的各种值

    (即网页被卷上去的高度)(其他浏览器):document.body.scrollTop; 获取竖直滚动条顶部的垂直高度 (即网页被卷上去的高度)(ie浏览器): document.documentElement.scrollTop...(若无父级对象或父级对象没有定位,就是距离文档顶部):offsetLeft 获取元素最上边已定位的父级对象的长度(若无父级对象或父级对象没有定位,就是距离文档左端):offsetTop 屏幕分辨率的高...的宽度: $(document.body).width(); 获取竖直滚动条顶部的垂直高度 (即网页被卷上去的高度) :$(document).scrollTop(); 获取水平滚动条到左边的水平宽度...+ padding + border + margin) 获取元素的高度:$(obj).outerHeight(true); (height + padding + border + margin) 某个元素的上边界文档最上边距离...:obj.offset().top; 某个元素的左边界文档最左边距离:obj.offset().left; 鼠标移动: screenY: 鼠标相对于显示器屏幕左上角的偏移 pageY

    14.1K32

    Vue.js的图片加载性能优化你可以试试

    // 获取图片距离 getRect(element) { const rect = element.getBoundingClientRect(); const top...document.documentElement.clientHeight||document.body.clientHeight; for (let i = n; i < len; i++) { // 如果图片顶部距离小于可见区域高度与滚动条距离顶部高度之和时...1、在src根目录下创建util文件夹,里面创建util.js; 2、在src根目录下的main.js中键入以下代码,引入util.js,并且全局注册; import utils from '....// 等背景图片加载成功后 去除loading console.log("加载完成"); return false }; }, // 获取元素距离...document.documentElement.clientHeight||document.body.clientHeight; for (let i = n; i < len; i++) { // 如果图片顶部距离小于可见区域高度与滚动条距离顶部高度之和时

    1.8K10
    领券