拖拽工具条
JavaScript实现的轻量级拖动条,调整相邻板块区域大小通过纯JavaScript创建了一个简单的拖动条(dragbar)来调整两个相邻HTML板块区域的大小,只需要简单十几行JS代码即可实现,无需依赖任何三方插件,特别的轻量级。
抖动效果
GSAP 实现仿iPhone音量条DIV拖拽抖动弹跳动画效果受 iPhone 音量条的启发设计的这款可随意通过拖拽的方式调整宽度的DIV弹性效果,拖动完成后会有抖动效果,只需按住并拖动右侧拖拽杆(鼠标悬停显示拖拽杆)即可看到这种交互性特别强的抖动效果。该...
图片比较
使用纯 JavaScript 实现的拖动滑块比较图片这段代码使用纯 JS 创建了一个轻量级的图片比较滑块,通过拖动调整滑块,可以交互式地比较两张图片,其主要功能包括根据滑块的位置动态改变前一张图像的宽度,从而提供丝滑的图像比较体验,同时还提供了悬...
灵活拖拽
基于 JavaScript 实现的可拖动排序标签本 JavaScript 代码片段可帮助您在容器中创建可拖动的分类标签,它的工作原理是允许用户点击并拖动标签,在容器中重新定位标签,该功能可用于组织列表或界面中的项目并确定其优先级,尤其适用于...
范围调节器
使用 CSS 创建的可通过拖拽或者滑动方式调整大小的垂直范围滑块本 HTML 和 CSS 代码可帮助您创建垂直范围滑块,该插件允许用户在手机等移动设备中通过上下滑动拇指在指定范围内选择一个值或者电脑等桌面设备中通过拖拽的方式调整刻度范围。该范围滑块具有独特的...
范围控制
用 JavaScript 控制带有 2 个手柄的 HTML 范围滑块这是一款功能强大、高度可配置的范围滑块插件,基于 Vanilla JavaScript 和 jQuery 设计。该款插件可设置两个或者一个调节手柄控制数据范围,可在配置选项中配置最小值、最大值...
图片差异比对
jQuery 拖拽滑块实时比较图片差异插件这是一款轻量级、简单易用的 jQuery 图像实时比对滑块插件,它可用于显示两张图片的前后差异,用户只需用鼠标拖拽/轻扫图片上的纵轴,就能直观地看到图片不同之处。该插件可轻松实现图片前后差异对比...
图标滑块
用 CSS 制作带有飞行图标的自定义范围滑块使用 CSS 创建一个带有小飞机飞行图标的自定义范围滑块,滑块代表了从一个目的地到另一个目的地的飞行路径,让用户可以直观地看到旅程的进展。调整滑块时,飞行图标会沿着滑块移动,模拟飞机的运动。滑块...
旋转报纸
基于 CSS 实现的报纸版面旋转效果利用CSS创建的一个旋转报纸版面,在进入页面时附带旋转入场效果,同时该效果也能应用于div/图片或者其他块级元素的旋转中,在网站中可以此趣闻十足的视觉方式展示新闻或文章,它能为您的内容增添视觉趣...
图片滑块
基于 CSS 实现在 HTML 中拖动滑块实时比较图片差异效果这段代码可在 HTML 中创建一个超级简单的图片对比滑块,会呈现来回滑动竖线分别显示两张不同图片的效果,它能让你轻松比较两张图片;使用范围滑块,您可以在并排放置的两张图片之间平滑过渡;这一功能有...
拖放列表
JS实现通过拖放任务项管理任务列表这段代码用 JavaScript 实现了拖放任务列表选项。它利用 dragula 允许任务在不同列之间通过拖拽的方式移动。代码为任务创建了几列:"待办"、"正在处理"、"已完成 "和 "垃圾桶"...
拖拽div
利用JS实现的拖拽调整div大小及截屏选取功能本代码片段可帮助您在网页上创建一个可通过拖拽的方式调整 div 元素大小的功能,它提供了通过拖动 div 的边角来改变其大小的功能,它的工作原理是为 div 的边角添加事件侦听器,使您能以拖拽的...