文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

前端实现伸缩框

JS 实现伸缩框 我们的思路是这样子的： 实现右下角的三角拖动图标 计算伸缩框距离左边和顶部的距离 监听鼠标的点击、拖动、抬起事件，记录鼠标当前相对视窗左上角点的左侧距离和顶部距离 计算鼠标距离边框左侧的距离...，即边框的新宽度 计算鼠标距离边框顶部的距离，即边框的新高度 限定边框的最小距离，防止 icon 拖动隐藏 我们需要跟浏览器的事件打交道，这里引入 RxJS ，（当然，读者可以手写原生 javascript...RxJS 是一个用于处理异步事件流的库。...在开始之前，我们还得熟悉下juejin.cn/post/708512…中的 Element.getBoundingClientRect() 方法： 我们可以通过这个方法获取元素其左上角顶点相对可视窗口的坐标...当然，我们还需要通过 event.clienX 和 event.clientY 获取当前鼠标距离可视窗口的坐标(clientX, clientY)。

84910

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

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。...()); JavaScript中： 获取坐标 getBoundingClientRect() ：获取元素相对于浏览器视口的的坐标，返回一个Object对象，有6个属性：top |...，不包括外边距） offsetWidth ：元素的宽度（包括边框和内边距，不包括外边距） 偏移值 offsetLeft ：元素的相对水平偏移位置（左边界距离可视区域最左侧的距离） offsetParent...元素的位置偏移量 offset() ：返回包含 top 和 left 两个属性的对象，相对于 document 文档的坐标。...$(document).scrollTop() ：document 元素相对 document 元素对应的滚动条顶部的垂直偏移量，可获取已滚动的距离或设置将要滚动的距离。

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

    再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetXTop,clentX

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕，于是决定做个图来区分一下(画得我手那个酸呀。。。。)...event对象位置信息获取 先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。...IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。...因为滚动条不会出现在顶部或者左侧 offset 指偏移，包括这个元素在文档中占用的所有显示宽度。比client 多了border。     ...    scrollTop  设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 js中getBoundingClientRect 当滚动位置发生了改变，top和left属性值就会随之立即发生变化

    1.9K20

    clientWidth，offsetWidth，scrollWidth你分的清吗

    相等 scrollTop 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。...getBoundingClientRect() 它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离...但是滚动元素是从可视区域的左上角和右下角开始计算，如果想获取滚动元素整体的坐标，需要加上滚动距离 　var X = node.getBoundingClientRect().left+node.scrollLeft...} = this.pRef[`ref${value}`].getBoundingClientRect(); // needScroll就是元素底部距离滚动容器顶部的距离，再减去20像素，保证出现在视口中间...希望能对你有用，当然，如果可以，笔者也希望你能点个赞再走呢 参考链接 https://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

    3.1K10

    Web前端实现锚点功能的三种方式

    默认为 "start"，元素顶部将滚动到视窗顶部； 取值 "end"，元素底部将和视窗底部对齐； 取值 "center"，元素中线将和视窗中间对齐； 取值 "nearest"，元素将就近对齐。...三、scrollTo/scrollBy window.scrollTo 可将视窗滚动到指定的坐标。...用法如： window.scrollTo(xpos, ypos); window.scrollBy 可将视窗向上下或左右移动指定坐标的距离。...Element.getBoundingClientRect 的返回值包含 top、left、bottom、right、width 和 height 六个属性，除了 width 和 height 以外的属性均是相对于视窗的左上角来计算的...(); // 滚动 div#root 元素顶部到与视窗顶部对齐 window.scrollTo(domScrollLeft, domScrollTop + targetOffsetTop); window.scrollBy

    4.5K31

    【汉诺塔】小游戏开发教程

    绑定事件需要注意的是按下事件绑定到圆环上，而移动和松开事件要绑定到body上，否则当你移动过快时鼠标指针可能会和圆环不同步而超出圆环，进而当你松开后就监听不到松开事件了。...因为涉及到位置计算，所以需要获取实际的DOM元素，先在模板里加上ref用于引用DOM: <div class="column...： 1.圆环的右侧距窗口左侧的距离大于柱子区域左侧距窗口左侧的距离、同时圆环左侧距窗口的距离小于柱子区域右侧距窗口左侧的距离 2.圆环的顶部距窗口顶部的距离小于柱子区域的底部距窗口顶部的距离、同时圆环的底部距窗口顶部的距离大于柱子区域顶部距窗口顶部的距离...$refs['ring' + order][0].getBoundingClientRect() // 遍历获取柱子区域相当于浏览器窗口的位置信息 ;[0, 1, 2]....$refs['column' + index][0].getBoundingClientRect() // 重合检查 if (

    2.2K10

    Web浏览器滚动方案一览｜ rAF等

    通过合理选择和应用这些滚动方案，我们可以提供更加流畅和优化的用户体验。Window 大小与文档大小要获取窗口大小和文档大小，我们可以使用JavaScript编程语言。...alert('当前已从顶部滚动：' + window.pageYOffset);alert('当前已从左侧滚动：' + window.pageXOffset);这些属性是只读的。...基于浏览器API的滚动方法scrollToscrollTo 方法用于将页面或元素滚动到指定位置。它接收两个参数，第一个参数是横坐标，第二个参数是纵坐标。...例如：window.scrollTo({ top: 100, behavior: 'smooth'});scrollTo 方法对整个页面和单个元素都起作用，常用于点击某个按钮后滚动到页面指定位置，或者滚动元素内部内容...它有一个参数alignToTop：如果 top=true（默认值），页面滚动，使 elem 出现在窗口顶部。元素的上边缘将与窗口顶部对齐。

    73310

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

    “图片来源Seven's Blog 思路分析 通过上面三个 API，我们获得了三个值：可视区域的高度、元素相对于其父元素容器顶部的距离、浏览器窗口顶部与容器元素顶部的距离也就是滚动条滚动的高度。...()实现图片懒加载 先来了解一下这个API吧： getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。...是元素自身的宽高，但是right，bottom和css中的理解有点不一样。...传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。...Element/clientHeight [2] 阮一峰博客: http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

    1.2K31

    【实例】调整区域大小&动态隐藏区域

    设置或获取鼠标指针位置相对于触发事件的对象的X、Y坐标 2 pageX、pageY （只读）相对于整个文档的X、Y坐标以像素为单位的只读属性（包括滚动条） 74+106+3+300-5+2=480 screenX...这个接口描述了所有相同种类的元素所普遍具有的方法和属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为....该元素距离它左边界的宽度、宽度 0 scrollHeight、scrollWidth （只读，整数）包括由于溢出导致的视图中不可见内容 300 scrollLeft、scrollTop 读取或设置元素滚动条到元素左边、顶部的距离...clientHeight：可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算 - scrollHeight：返回整数，如果需要小数使用 Element.getBoundingClientRect...只读，整数）该元素自身可视高度、宽度加上上下border的宽度 300 offsetLeft、offsetTop 该元素左上角相对于 HTMLElement.offsetParent 节点的左边界、顶部偏移的像素值

    2.2K21

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

    变化，这样就有很多问题， 所以就需要根据图片的当前位置（元素距离顶部的位置（包括滚动条），和左边的位置）来动态的添加这个按钮 因为是hover触发的 所以这个按钮只有一个 （这样的做法是参考阿里以图搜图的功能做的...） ok 需求明白了之后 开始说怎么做 先说公式代码：（ top: 图片距离顶部的高度+滚动条的高度,left：图片距离左侧的高度） 1.滚动条的高度     // 获取 当前 滚动条的长度， 水平 ...document.body           ).scrollTop;         }         return { x, y };       } 2.图片距离上、左的距离：（主要方法：dom.getBoundingClientRect...）       // 获取 dom 到视口左侧和顶部的相对位置       function getDomToViewPosition(id) {         var dom = document.getElementById...(id);         let rectObject = dom.getBoundingClientRect();         return {           domToViewLeft:

    2.9K10

    详细设计一个文章页目录插件

    首先需要根据文章内容的二级和三级标题生成目录； 然后，页面从上到下滚动过程中，需要在右侧目录里高亮当前的标题，而高亮的原则是当前标题所在的位置到浏览器可视区域顶部的距离需要小于或等于一个固定值，如上图所示...-- 这里是部分文章内容 --> 和$listeners"> 和$listeners...div>` document.getElementById('arAnchorBar').innerHTML = retStr } 设置滚动监听事件 给 window 加上滚动事件，用于监听当滚动的时候去做一些操作...，这里的操作就是设置高亮和滚动目录。...这部分内容开始前，我们先来复习一个 API，该方法会返回元素的大小及其相对于视口的位置： Element.getBoundingClientRect() 需求分析的时候有提到，高亮的原则是当前标题所在的位置到浏览器可视区域顶部的距离需要小于或等于一个固定值

    2.7K20

    底部悬浮框 上拉和下拉功能

    实现一个通过触摸拖动操作来展开和收起底部悬浮框，并根据拖动过程中的位置和状态来调整底部容器的高度和展开状态的功能 用于记录拖动过程中的状态和位置，包括startY（起始Y坐标）、currentY（当前Y坐标）、isDragging（是否正在拖动）、isExpanded（悬浮框是否展开）、floatingBoxHeight...3：添加touchstart事件监听器，当触摸开始时，记录起始Y坐标、当前Y坐标，并将isDragging标志设置为true。同时，通过e.preventDefault()阻止默认的拖动行为。...5：悬浮框与窗口底部的距离和悬浮框与页面顶部的距离，判断是否需要展开或收起底部容器。...如果悬浮框与页面顶部的距离小于等于0，则将底部容器的高度设置为窗口高度减去悬浮框与顶部容器之间的距离，并将isExpanded和isDragging标志设置为false。

    63640

    偏移量、客户区大小、视口大小、滚动大小、确定元素大小

    其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。...（上面两者主要是用于确定内容的实际大小） scrollLeft：被隐藏在内容区域左侧的像素数。 scrollTop：被隐藏在内容区域上方的像素数。...（上面两者既可以确定元素当前滚动的状态，也可以设置元素的滚动位置） 5、确定元素的大小 getBoundingClientRect( )方法，这个方法会返回一个矩形对象，包含4个属性left、top、...right和bottom，给出了元素在页面中相对于视口的位置 ①由于ie8及更早版本认为文档的左上角坐标是(2,2)，而其他浏览器包括ie9则将(0,0)作为起点坐标，所以用函数使用它自身的属性来确定是否要对坐标进行调整...; var scrollLeft=document.documentElement.scrollLeft; if(element.getBoundingClientRect){

    1.9K20

    js获取元素到文档区域document的(横向、纵向)坐标的两种方法

    (如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时，了解到要获取某个元素在页面上的偏移量，需要将这个元素的offsetLeft和...二：通过 getBoundingClientRect() 方法实现 getBoundingClientRect方法用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗window的位置。...js代码： // 获取元素到文档区域的坐标 function getPosition(element){ var dc = document, rec = element.getBoundingClientRect...结语：上文已对如何获取元素相对于文档区域document的坐标位置做出了阐述，如遇到相关问题，可联系本人或直接发表评论，另外，对于右坐标right以及下坐标bottom的获取只需把left、top坐标的大小和元素本身的宽度...(elem.offsetWidth)以及高度(elem.offsetHeight)相加即可，当然offsetWidth、offsetHeight属性会计算元素的内边距、边框，所以最好的办法还是通过getBoundingClientRect

    3.3K30

    商品添加到购物车动画getBoundingClientRect获取元素位置

    rectObject = object.getBoundingClientRect(); 2.返回值类型： rectObject.top：元素上边到视窗上边的距离; rectObject.right：...1.2 用户滑动右侧的内容左侧的导航栏会响应式改变 右侧内容监听一个scroll事件，当触发滑动事件的时候获取粘性定位在顶部的标题，根据标题使导航栏定位到相应的li var obj = element.getBoundingClientRect...这也实现了内容区标题栏始终在顶部的效果。关于粘性定位更多的可以看这里 2. 按钮缓慢弹出 当我们点击添加按钮的时候其他的内容会缓慢弹出，这个是靠css的动画实现的。...我们先将个数减少按钮和被选中物品个数num的left设为48px，使其被隐藏。点击添加按钮时选择物品个数大于0则让left变为0达到一个缓慢弹出的动画效果。...--其他n个小球--> 令小球为绝对定位这样可以改变它的left和top。

    2.3K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券