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

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

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

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

javascript中各种计算位置高度方法

网页正文部分左: window.screenLeft; 屏幕分辨率高: window.screen.height; 屏幕分辨率宽: window.screen.width; 屏幕可用工作区高度...: window.screen.availHeight; 屏幕可用工作区宽度:window.screen.availWidth; scrollHeight: 获取对象滚动高度。...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定父坐标的计算左侧位置...offsetTop:获取对象相对于版面或由 offsetTop 属性指定父坐标的计算顶端位置 event.clientX 相对文档水平座标 event.clientY 相对文档垂直座标...event.clientX+document.documentElement.scrollTop 相对文档水平座标+垂直方向滚动量 要获取当前页面的滚动条纵坐标位置,用: document.documentElement.scrollTop

1.6K20

【移动端bug】iOS 下 Input 和 fixed 问题

保留在原位 我获取了正常显示时 和 聚焦时 输入框距离浏览器顶部高度,如下图 ?...两者高度是一样! 聚焦时高度 应该要比 正常显示要小 猜对,所以证明了我们猜想是对 定位元素保留在了原位!!...2、 证明是否页面已经滚到底部时,唤起键盘,定位元素实际DOM被顶上去 获取了正常显示时 和 聚焦时 输入框距离浏览器顶部高度,如下图 ? 两者高度不一样了!!...最后查看一下正常时按钮高度,和 定位元素输入框聚焦时高度,如下图 你可以看到,聚焦之后,高度变小了,说明往上滚动了 说明,页面文档元素并不是像 定位元素那样 实际DOM 停留在原地 ?...,唤起键盘,定位元素 实际DOM 就是正常 3证明一下猜想 1 、证明聚焦再失焦,定位元素实际dom是否跟显示元素错位了 我对比了 新打开定位元素输入框高度 和 聚焦又失焦操作后 定位元素输入框高度

3.9K60

React-Native 版高仿淘宝、京东商城首页、商品分类页面

商品二级分类 商品子分类 顶部滑动tab、智能下拉菜单 用到技术 自定义 Badge(角标) 动画、动画插值器 Swiper 轮播图 自定义 tab 自定义 popup 弹窗下拉菜单 FlatList...outputRange: [0, 80], // 将右边改为从0~80 extrapolate: 'clamp' // 滚动超出0~80范围,不在更改边...= (height - 65) / 2; // 如果当前 item 高度 大于 屏幕一半高度,就让滚动条滚动 indexHeight - halfHeight 高度(类似京东商品分类效果...) 方法可以动态获取组件在屏幕中位置、宽高信息。...measure 方法参数 x,y 表示组件相对位置,width,height 表示组件宽度和高度,pageX,pageY 表示组件相对于屏幕绝对位置

3K10

【CSS】盒子模型内边 ⑤ ( 内边不影响盒子模型尺寸情况 | 不设置宽度或高度为其设置 Padding 内边时不撑开盒子 )

文章目录 一、内边不影响盒子模型尺寸情况 二、内边影响盒子模型尺寸情况 一、内边不影响盒子模型尺寸情况 ---- 如果元素没有指定高度 , 为该元素设置 Padding 内边 , 则不会撑开盒子...; 下面的代码中 , 父容器是 div , 子容器是 p , p 标签宽度默认充满父容器 , 如果没有为其设置父容器宽度 , 为 p 标签设置 内边 , 不会撑开盒子 ; 代码示例 : 展示效果 : 测量模型宽度 : 测量模型高度 : 二、内边影响盒子模型尺寸情况 ---- 如果给 p 标签设置了 具体尺寸...> 显示效果 : 测量宽度 : p 标签 内容宽度 200 像素 , 设置左内边 , 水平方向上撑开了 50 像素 , 最终盒子宽度为 250 像素 ; 测量高度...: 没有设置 垂直方向 上内边 , 没有撑开效果 ;

1.3K20

web前端必备英语词汇都在这儿了,客官你了解多少?

clientY 光标相对于该网页垂直位置 close 关闭当前页面 confirm 输入框 clientWidth 获取元素宽度 clientHeight 获取元素高度 childNodes 获取所有子节点...橙色 one 一个 outer 外面的 only 仅仅 overflow 溢出 open 打开 P: previous 前一个 prevent 阻止 pageX 光标相对于该网页水平位置...pageY 光标相对于该网页垂直位置 port 端口 protocol 协议 prompt 提示框 parentNode 返回父级节点 parentElementNode 获取已知节点父节点 previousSibling...返回上一个兄弟节点 previousElementSibling 返回上一个兄弟元素 password 密码 position 位置 prepend 预先 padding 内边 progress...screenX 光标相对于该屏幕水平位置 screenY 光标相对于该屏幕垂直位置 setAttribute 设置属性 scrollHeight 获取文档整体高度 scrollTop 获取文档滚动高度

3K20

微信小程序自定义导航栏兼容适配所有机型

1.获取导航栏高度及按钮位置 微信提供了获取导航栏高度Api和胶囊按钮位置Api // 系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息...statusBarHeight // 状态栏高度 screenWidth // 胶囊宽度 top // 胶囊到顶部距离 height...// 胶囊底部间距(保持底部间距一致) menuRight: 0, // 胶囊右方间距(方保持左、右间距一致) menuHeight: 0, // 胶囊高度...(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏到胶囊间距...(胶囊上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度 this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight

2.3K1110

Fabric.js 激活输入框🎈

再次点方法是使用 JS 获取输入框元素,再调用 focus 事件选中输入框。 在 Fabric.js 中,IText 组件也提供了类似的方法。...实操 Fabric.js IText 是一个可编辑文本框,可以在项目运行时输入文字,功能其实和 HTML input 差不多,都是可以让用户输入。...默认情况 在 Fabric.js 中,如果在创建 IText 时没有添加文字,在画布上你是很难用肉眼观察出你输入框在哪。...padding: 7 // 设置输入框内边 }) canvas.add(iText) // 将输入框添加到画布中 复制代码 此时画布和输入框是被创建出来了,...此时可以看到光标所在位置一闪一闪。 《enterEditing 文档》 再进一步 使用 enterEditing() 后输入框是激活了,也能看到光标一闪一闪。 但这就完了吗?

5.9K10

JS - 可自动伸缩高度文本框

textarea如果设定了宽高,那么如果文本超出框高度,会自动出现滚动条。而不会撑开文本框高度。 如果什么也不设置,最小宽高很窄很细,随便输入内容也会超出文本框隐藏,且自动增加滚动条。 ?...因为文本框宽高固定死了, 还是超出出现了滚动条。 怎么让文本框初始化设置一定高度,但是文字超出时自动跟随内容高度伸缩?...答: 初始化高度通过css设置(如上),自动伸缩高度值通过js来计算(如下)。 如果js计算的话,就需要事件触发,用change事件? 答:但是change事件体验不好。 为什么?...答:就是计算文本框滚动高度,即内容高度 具体怎么做? 答:键盘每次弹起时候,获取文本框内容高度添加给文本框高度,即可让其实时跟随内容自适应。 内容高度用什么属性计算?...即:scrollHeight:给定对象滚动高度,即内容可视高度

9.3K20

WPF 使用 WindowChrome,在自定义窗口标题栏同时最大程度保留原生窗口样式(类似 UWPChrome)

位置在哪里?图标边又是多少,颜色值又是什么?鼠标滑入划出动画效果如何? 窗口标题栏交互 标题栏上有右键菜单,如果自己模拟,基本上这个就要自己重新实现了。...甚至拖拽调整窗口大小时光标热区也是类似的: ? ▲ 拖拽光标热区 唯一不符合要求是标题栏高度,这时我们可以继续设置 GlassFrameThickness,把顶部设置得更高一些。...我测量了一下 Microsoft Store 应用按钮高度,是 32。 ? 但是,这 32 包括了顶部 1 像素边框吗?我使用放大镜查看,发现是包含。 ?...而且在最大化窗口之后,按钮高度继续压缩。标题栏只剩下 24 高度,按钮只剩下 22 高度了。 ? 这显然也模拟得不像。于是,我们霸气一点,直接把顶部改得更大。为了凑个整,我写 64 好了。...▲ 可定制客户区 特别注意:可定制区域中顶部是包含那 1 像素,但其他三边不包含。

6.1K20
领券