【vue3】拉动分割线切换左右两张图片
需求：两张图片重叠，中间有一条线作为分界线，拉动线可以分别显示左右图片
实现案例：
实现思路：
- 图2不动；
- 图1给一个div父元素，图1相对于父元素绝对定位，父元素相对组件盒子绝对定位，在分界线移动过程中，此父元素的 left 值与图1的 left 值设置成相反。
实现步骤：
- 获取到组件盒子宽度 imgBoxWidth；
- 点击分界线（黑色实线）时获取到此时分界线距浏览器左侧的距离 startX（mousedown 的时候，保存下来当前鼠标相对于浏览器视口的 x 坐标）；
- 获取分界线距组件盒子左侧的距离 divideLineLeft；
- 获取分界线移动的距离 moveLeft（mousemove 的时候，得到新的 x 坐标，与原始 x 坐标相减，得到位移量）；
- 计算比例，let L = (divideLineLeft + moveLeft) / imgBoxWidth * 100
- 图1父元素的 left 值为 L%，图1的 left 值为 -L%，分界线的 left 值为 L%。
示例图：
完整代码：
{{props.info[1].title}}![]()
{{props.info[0].title}}![]()
左 右
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！