文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取图片的位置（距离最顶部）

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

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

    用Javascript获取页面元素的位置

    制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先，要明确两个基本概念。...使用的时候，有三个地方需要注意： 1）这个函数必须在页面加载完成后才能运行，否则document对象还没生成，浏览器会报错。...所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。 （图二 offsetTop和offsetLeft属性） 下面两个函数可以用来获取绝对位置的横坐标和纵坐标。 　　...五、获取网页元素的相对位置 网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。 有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。...六、获取元素位置的快速方法 除了上面的函数以外，还有一种快速方法，可以立刻获得网页元素的位置。 那就是使用getBoundingClientRect()方法。

    3.3K70

    Android利用自带的位置服务，获取当前位置信息

    笔者项目里，需要获取用户的当前位置信息，因为没有接地图SDK，打算用原生自带的位置服务去做。操作了一下，踩了几个大坑，总算是幸不辱命。这里做个记录，顺便分享给大家。...Thread(Runnable { val serviceString = Context.LOCATION_SERVICE// 获取的是位置服务...: String {//一定要异步，否则获取不到 //用来接收位置的详细信息 var result: List?...爬坑指南： 1.initLocation()这个方法，可以看到笔者是放在线程里跑的，一定要这样做，否则拿到经纬度之后，无法通过经纬度获取到位置信息。笔者在这里纠结了许久。...2.在通过经纬度获取位置信息时，获取到的result是个集合，他对你的当前位置做了不同维度的描述，越后面的，描述得越精确。

    3.3K00

    JS获取事件对象，获取事件的源对象（Firefox，IE）

    做笔记，以防自己忘记~~ JS获取事件event，不同浏览器有不同的做法。 例如IE下，在js函数中，通过window.event就可以获取，不必在函数中添加什么参数。...注意获取的标记都以大写表示，如"TD","TR","A"等。所以把看过的一些抄下来，不记得的时候再来看看。...： IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即： firefox...在 ie中处理事件直接使用window.event对象即可,但在firefox中,是没有 window.event对象的,函数需要使用事件的时候,需要在事件发生时把事件作为参数传递给函数,不象在ie...中,事件对象是全局的,随处都可以访 问.下面这个getEvent()函数可以兼容firefox和ie,只需要在访问事件对象的函数的开始调用getEvent()即可,不用再把事件作为 参数传递.以下代码已经实验通过

    10.1K50

    iOS UITableView获取特定位置的cell

    一、tableView双级联动 [菜单栏联动.gif] [UITableView双级联动.gif] 以上两种效果比较类似，实现的关键在于都是需要获得在滑动过程中滑动到tableView顶部的cell的indexPath...偏移量的值实际上可以代表当时处于tableView顶部的cell在tableView上的相对位置， 那么我们就可以根据偏移量获得处于顶部的cell的indexPath。...UITableView中心的cell [获取UITableView中心线cell.gif] 获取处于tableView中间cell的效果，用上述方案一比较麻烦：要考虑可见cell 的奇、偶个数问题，还有...cell是否等高的情况；方案二用起来就快捷方便多了，取的cell的位置的纵坐标相当于在偏移量的基础上又增加了tableView高度的一半。...：第 %ld 组 %ld个",middleIndexPath.section, middleIndexPath.row); } 需要示例Demo的话请移驾我的Github→UITableViewLinkage

    4.8K80

    获取Object对象的length

    所有JS程序猿（甚至不止JS）都知道，数组（Array）是有length的，通过length属性，可以很方便的获取数组的长度。可以说，只要使用到了数组，就必会使用到其length属性。...而Object对象是没有length属性或方法的，它确实没有存在的必要，因为人们只会在乎该对象能提供什么样的方法，而没有必要知道它到底有多少方法。...}); 4 }catch(e){} 面对这样的数据，我就犯愁了，因为object不能获取对象长度。...当然我可以叫后台同事改一下接口返回的格式，但是既然他可以写出以这样格式返回的代码，那其他的后台同事也同样 可以写出。为了不影响到更多的人，就需要我在前端来做处理了。...其实要获取对象的长度也不难，用for in 语句就能实现，如下代码所示： var a = {a:1,b:2,c:3,d:4}; function length(obj) { var count

    2.2K110

    如何获取对方IP，查询对方的位置

    再在“网络条件”设置项处，选中“接受数据包”复选框，同时将“对方IP地址”设置为“任何地址”，而在“本地IP地址”设置项处不需要进行任何设置; 　　下面再单击“UDP”标签，并在该标签面下的“本地端口”...接着在“当所有条件满足时”设置项处，选中“通行”选项，同时将“其他处理”处的“记录”选项选中，而“规则对象”设置项不需要进行任何设置;完成了上面的所有设置后，单击“确定”按钮，返回到防火墙的主界面;再在主界面中选中刚刚创建好的...例如，借助一款名为WhereIsIP的搜查工具，你可以轻松根据对方好友的Web网站地址，搜查得到对方好友的IP地址，甚至还能搜查到对方好友所在的物理位置。...当然，除了可以知道IP地址外，你还能知道对方好友所在的具体物理位置。 　　...4、命令查询法　　这种方法是通过Windows系统内置的网络命令“netstat”，来查出对方好友的IP地址，不过该方法需要你先想办法将对方好友邀请到QQ的“二人世界”中说上几句话才可以。

    6.8K30

    iOS UITableView获取特定位置的cell

    一、tableView双级联动 菜单栏联动.gif UITableView双级联动.gif 以上两种效果比较类似，实现的关键在于都是需要获得在滑动过程中滑动到tableView顶部的cell的indexPath...偏移量的值实际上可以代表当时处于tableView顶部的cell在tableView上的相对位置， 那么我们就可以根据偏移量获得处于顶部的cell的indexPath。...UITableView中心的cell 获取UITableView中心线cell.gif 获取处于tableView中间cell的效果，用上述方案一比较麻烦：要考虑可见cell 的奇、偶个数问题，还有cell...是否等高的情况；方案二用起来就快捷方便多了，取的cell的位置的纵坐标相当于在偏移量的基础上又增加了tableView高度的一半。...：第 %ld 组 %ld个",middleIndexPath.section, middleIndexPath.row); } 需要示例Demo的话请移驾我的Github→UITableViewLinkage

    1.3K30

    JS实现获取鼠标在画布中的位置

    JS实现获取鼠标在画布中的位置 效果展示 概述 本文讲解如何实现我们平时用的画布软件中，怎么获取的我们鼠标时刻在画布中的位置。.../ 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标 // 我们生活中常见的画布里面的那个获取鼠标的位置 就是这么实现的 var box = document.querySelector...('.box'); // 获取盒子的元素 box.addEventListener('mousemove', function(e) { // 为盒子添加监听事件 当鼠标在盒子上面的时候.../ 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标 // 我们生活中常见的画布里面的那个获取鼠标的位置 就是这么实现的 var box = document.querySelector...('.box'); // 获取盒子的元素 box.addEventListener('mousemove', function(e) { // 为盒子添加监听事件 当鼠标在盒子上面的时候

    6300

    html怎么动态获取系统时间_代码实现获取当前的地理位置

    HTML+JS动态获取当前时间 效果图： 说明： JavaScript 中 Date 对象 创建 Date 对象的语法： var myDate=new Date() 常用 Date 对象方法...： 方法 描述 Date() 返回当日的日期和时间 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)...getMonth() 从 Date 对象返回月份 (0 ~ 11) getFullYear() 从 Date 对象以四位数字返回年份 getHours() 返回 Date 对象的小时 (0 ~ 23)...getMinutes() 返回 Date 对象的分钟 (0 ~ 59) getSeconds() 返回 Date 对象的秒数 (0 ~ 59) JavaScript 中 requestAnimationFrame...var month=d.getMonth()+1; //获取月，从 Date 对象返回月份 (0 ~ 11)，故在此处+1 var day=d.getDay() //获取日

    2.5K10

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

    对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 var offsetHeight = element.offsetHeight; ?...然而，对于可被截断到下一行的行内元素（如 span），offsetTop 和 offsetLeft 描述的是第一个边界框的位置（使用 Element.getClientRects() 来获取其宽度和高度...），而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸（使用 Element.getBoundingClientRect 来获取其位置）。...scrollTop Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。...没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。

    4K80

    JavaScript 获取鼠标及元素在页面上的位置

    HTML5学堂：JavaScript获取鼠标的位置，大家会想到clientX/Y等属性，灵活的获取鼠标的位置信息，能够便于我们实现各种复杂的页面交互效果，到底还有哪些属性可以获取鼠标的位置信息？...另外，还有哪些能快速获取标签在页面中的位置信息？ 在书写一些“拖拽”页面交互效果，比如常见的拖拽效果、自定滚动条、放大镜等效果，都需要用到了鼠标或元素在页面上的位置信息。...为了能够快速、灵活的获取鼠标位置信息，今天要带着大家来接触的不是利用clientX/Y获取鼠标的位置信息，而是利用了大家可能比较少用的两个属性layerX/Y和offsetX/Y，它们与clientX/...别急，咱们一个一个的来分析 layerX/Y属性的说明 layerX/Y获取到的鼠标位置是参考被触发元素左上角的距离 outerEle.onclick = function(e) { // 处理事件对象兼容...offsetX/Y属性的说明 offsetX/Y获取到鼠标位置也是参考被触发元素的左上角 outerEle.onclick = function(e) { // 处理事件对象兼容 var

    3.4K60

    request对象获取数据的方法_request对象的运用方法

    大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说request对象获取数据的方法_request对象的运用方法,希望能够帮助大家进步!!!...在进行请求转发时，需要把一些数据传递到转发后的页面进行处理，需要使用request对象的setAttribute方法将数据保存到request范围内的变量中 使用： request对象可以视为一个域，...object); 参数说明 name：变量名，为String类型， object：用于指定需要在request范围内传递的数据，为Object类型 在将数据保存到request范围内的变量中后...，可以通过request对象的getAttribute()方法获取该变量的值： request.getAttribute(String name)； 创建index.jsp文件，首先应用Java的try...创建deal1.jsp文件，在该文件中通过request对象的getAttribute()方法获取保存在request范围内的变量result并输出，由于getAttribute()方法的返回值为Object

    1.8K30

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

    今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。...getBoundingClientRect() ：获取元素相对于浏览器视口的的坐标，返回一个Object对象，有6个属性：top | left | right | bottom | width | height...元素的位置偏移量 offset() ：返回包含 top 和 left 两个属性的对象，相对于 document 文档的坐标。...position()：返回包含top和left两个属性的对象，相对于最近的已定位的包含元素的位置。若无，则相对于document。...、内边距和内容 outerHeight(true) ：获得整个元素的高度，包括外边距、边框、内边距和内容 注意： 1）ele.css("height") ：返回带有完整单位的字符串（例如400px），若运算需要

    3.1K00

    第127天：移动端-获取触摸点的位置

    一、移动端轮播图滑动 1、先获取手指在轮播图元素上的滑动方向(左右) （1）手指触摸开始时记录手指所在的坐标X （2）获取界面上的轮播图容器 var $carousels=$('.carousel')...touchstart、touchmove、touchend三种事件下的鼠标位置点获取： （1）touchstart事件下获取：e.originalEvent.targetTouches[0].pageX...说明：由于手指头是多点触摸到屏幕上的我们所以e.originalEvent.targetTouches的 意思是一个手指触碰点集合我们只需要获取第一个点就可以了所以 e.originalEvent.targetTouches...[0]，所以位置.pageX .pageY就ok了 （2）touchend事件的获取：e3.originalEvent.changedTouches[0].pageX 下面是其他的一些介绍： 每个Touch...对象包含的属性如下。

    1.5K20

    分享几个IP获取地理位置的API接口

    博主找了几个小时的资料，又手动抓取到了几个接口补充进来，应该不能再全了…… 360获取本机IP、地区及运营商 接口地址：http://ip.360.cn/IPShare/info 传递参数：无 返回类型...：json 返回值： greetheader：提示语(如上午好、中午好等) nickname：本机已登录的360账号 ip：本机IP地址 location：IP所对应的地理位置(中间会有“\t”分隔地区与运营商...：错误编号(为零则代表成功) errmsg：错误信息 data：查询的IP所对应的地理位置(中间会有“\t”分隔地区与运营商) 请求示例： Request URL:http://ip.360.cn/IPQuery...IP、地区及所处位置 接口地址：http://www.ip508.com/ip 传递参数： q：要查询的IP地址(为空则查询本机IP) 参数传递方式：GET/POST 返回类型：json 返回值： r：...是否请求成功 i：查询到的IP地址 c：查询到的IP所对应的地理位置 a：查询到的详细位置(如XX公司) 请求示例： Request URL:http://www.ip508.com/ip?

    5.6K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券