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

纯CSS实现吸附效果

前言 「吸附效果」就是网页滚到到某个位置,元素固定在该位置,后续不随网页滚动而滚动。吸附效果很常见,譬如吸顶效果和吸底效果,经常用在跟随导航、移动广告和悬浮提示等场景中。...原理 在jQuery时代就有很多吸附效果插件了,现在常用的三大前端框架也有自身第三方的吸附效果组件。...JS实现吸附效果的代码在网上一搜一大堆,更何况笔者喜欢耍CSS,在此就不贴相关的JS代码了。本文为各位同学推荐一个很少见很少用的CSS属性:position:sticky。...简单的「两行CSS核心代码」就能完成「十多行JS核心代码」的功能,何乐而不为呢。 实现 简单回顾position常用的值,怎样用就不说了,各位同学应该都熟透了。...有吸附效果需求的同学建议一试,要兼容IExplorer就算了。 ? 兼容性

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

精读《自由布局吸附线的实现》

自由布局吸附线的效果如下图所示: 那么如何实现吸附线呢?我们先归纳一下吸附线的特征: 正在拖动的 box 与其他 box 在水平或垂直位置距离接近时,会显示对齐线。...当吸附作用产生时,鼠标在一定范围内移动都不会改变组件位置,这样鼠标对齐就产生了一定的容错性,用户不需要一像素一像素的调整位置。 当鼠标拖动的足够远时,吸附作用消失,此时 box 跟手移动。...我们还需要设置吸附阈值,否则所有鼠标位置都会产生吸附。所以当 source 所有位置最小距离大于吸附阈值时,就不产生吸附效果了。 产生吸附效果 吸附的实现方式与拖拽的实现方式有关。...box 的向下位移,从而保证 box 在吸附时在垂直方向没有产生移动,这样吸附效果就实现了。...+ snapX * 2 总结 我们梳理了吸附的判断条件与吸附作用如何生效,以及 resize 时中间线吸附的特殊处理逻辑。

24460

PS套索工具抠图及快捷键

套索工具有三个子工具菜单:套索、多边形套索和磁性套索 普通套索工具。...适合选取比较规则的几何图形 首先点区图片要扣取的一个点,然后拉动鼠标是一直线延伸的射线 然后选取下一点才能改变方向,直至选取一个完整的闭合选取即可完成 磁性套索工具。...适合选取图片色度对比度较大的图形 磁性套索在使用时会吸附差异较大像素的边缘 在边界模糊的位置,我们可以适当的鼠标单击来纠正磁性套索选取的选区 选取其中一点,然后在要选取图形边缘拖动鼠标,最后闭合选取即可完成...使边缘看起来很平滑 因为点整图像用正方形的小点来描述图像,所以在描述曲线及一些角度的直线时就会产生锯齿 消除锯齿可以使边缘变的圆滑 消除锯齿后其实也有锯齿,但是锯齿的边缘变得柔和了 三、最后磁性套索会形成闭环...即可从选区减去这部分 按住Ctrl键不放,即可移动使用套索工具勾勒出的选取 Delete:后退或者取消一个点,记得鼠标也跟着返回 Backspace:也能后退或者取消一个点 Spacebar(空格键):在用磁性套索工具可按住空格键不放

3.4K10

吸附设计:学会正确地贴贴

本文将介绍图形编辑器中吸附系统中,各种吸附类型的吸附逻辑和算法实现,让大家对吸附有一个概念。...吸附类型常见的有这么几种: 网格吸附; 极轴追踪; 参考线吸附; 正交; 对象吸附; 下面我们来具体看看吧。 网格吸附(Grid Snap) 首先是网格吸附。...如果不要求强制吸附,通常我们会规定一个阈值(比如 4px)。当目标点距离吸附点小于这个值,才应用吸附,使用吸附点;否则不做吸附。...1、像素网格吸附和参考线吸附同时开启 像素网格吸附(间隔为 1 的网格吸附)要求点强制吸附在像素网格上,即 x 和 y 的值是整数。 但是参考线可能是小数,如果吸附到参考线上,就对不上像素网格点了。...最后方案是,先计算网格吸附后,然后对这个网格吸附点再做正交吸附。 4、网格吸附和对象吸附同时开启 同上,先求网格吸附点,然后再对这个网格吸附点做对象吸附

6210

图形编辑器开发:网格与网格吸附

作用是让用户可以较 直观 地观察到图形的距离和大小关系,以及实现网格吸附。 网格绘制 考虑到性能,我们 只绘制视口范围内的网格线。其他超出的部分不同绘制出来。...网格吸附 网格通常配套吸附效果。这样用户可以明确知道自己在用网格吸附,以及新的点大概会吸附到哪里。...), y: getClosestTimesVal(point.y, spacingSnapY), } 网格吸附相关配置项: gripSnapOn:是否开启网格吸附; gridSpacingSnapX...:网格水平方向吸附间距; gridSpacingSnapY:网格垂直方向吸附间距。...通常吸附间距应该和网格渲染间距相同,这样吸附到网格上的界面就比较符合直觉。 但实际上是可以不一样的。尤其是网格密度过大时如果使用了动态改变网格间距的方案。 结尾 网格比较重要的大概就是这些。

15210

工业机器人的腕部和手部结构

1.机械手常见类异和结构 机器人的手部是直接用于抓取和握紧(或吸附)工件或者夹持专用工具(如喷枪、扳手、 焊接工具)进行操作的部件,它具有模仿人手动作的功能,安装于机器人手臂的前端。...工业 机器人末端执行器大致可分为以下几类:夹钳式取料手;吸附式取料手;仿生多指灵巧手。 手爪的典型结构有以下几种: (1)机械手爪。...在线圈通电的瞬时,由于空气间隙的存在,磁阻很大,线圈的电感和启动电流很大,这时 产生磁性吸力将工件吸住,一旦断电,磁吸力消失,工件松开。若采用永久磁铁作为吸盘,则 必须强迫性地取下工件。...磁力吸盘的缺点是被吸取工件有剩磁,吸盘上常会吸附一些铁屑, 致使不能可靠地吸住工件,而且磁力吸盘只适用于工件要求不高或有剩磁也无妨的场合。...另外, 钢、铁等磁性物质在温度为723 °C以上时磁性会消失,故高温条件下不宜使用磁力吸盘。 磁力吸盘要求工件表面清洁、平整、干燥,以保证可靠地吸附

6.7K81
领券