React H5移动端实现原图对比特效

记录下我在项目中需要实现的一个js特效，有需要的小伙伴自己参考哦，切记不要CV，俗话说：“授人以鱼不如授人以渔”

import React, { useEffect } from 'react';
import './index.less';

export default function Header() {
  // 原图对比
  useEffect(()=>{
	// 第一步：获取相关dom元素
	const swiper = document.querySelector('.swiper');
	const beforeImg = document.querySelector('.before-img');
	const handle = document.querySelector('.handle');
	
	// 第二步：定义一个变量用于计算：触屏位置 - handle位置
	var marginX;
	
	// 第三步：开启触摸事件
	handle.addEventListener('touchstart',function(e){
		marginX = e.targetTouches[0].pageX - handle.offsetLeft;
		// 第四步：开启触摸移动事件
		swiper.addEventListener('touchmove',moveHandler)
	})
	
	// 第五步：触摸结束
	 handle.addEventListener('touchend', function (e) {
	 	// 第六步：取消触摸移动事件的绑定
        siwper.removeEventListener('touchmove',moveHandler)
    })
	
	function moveHandler(e){
		handle.style.left = e.targetTouches[0].pageX - marginX +'px';
		beforeImg.style.width = e.targetTouches[0].pageX - marginX +'px';
	}
  },[])
  
  return (
    <div className='before-after'>
      <div className="swiper">
      	<div className="before-img">
      		<img src="../assets/img/before-img" alt="" />
      	</div>
      	<img src="../assets/img/after-img" alt="" />
      	<span class="handle"></span>
      </div>
    </div>
  )
}

.before-after{
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	.swiper{
		position:relative;
		height:100%
		img{
			display:block;
			height:100%;
			user-select:none; /* 设置img禁止选中，防止图片拖动 */
		}
		.before-img{
			img{
				position:absolute;
				top:0;
				left:0;
				bottom:0;
				width:50%;
				height:100%;
				overflow:hidden;
			}
		}
		.handle{
			display:block;
			width:3px;
			height:100%;
			background-color:rgb(0,0,0,0.3)
			position:absolute;
			left:50%;
			top:0;
			transform:translate(-50%);
			content:'\2b0c';
			&::after{
				width:40px;
				height:40px;
				background-color:rgb(0,0,0,0.5);
				content:'\2b0c';
				color:white;
				font-size: 25px;
    			text-align: center;
    			line-height: 40px;
    			border-radius: 50%;
    			box-shadow: 0px 2px 6px #000;
    			transition: all .3s ease;
			}
		}
	}
}

效果如下：

是小北吖💭 2022-11-11 15.04.29