Reactsliderscanimagecomponent(.tsx+.less,hookscomponent)
ps:slider样式直接移到下面https://www.chaos.com/blog/ho...组件实现部分重点：可见性：“hidden”是左半边图片占据口袋底部，左右半边图片是绝对定位的。配置滑块的mousedown和up事件，当鼠标按下时监听mousemove事件。为了实现“即使鼠标移动到滚动条，在浏览器外，或者在浏览器内从f12控制台松开”，也可以取消鼠标拖动——直接在document而不是document上配置事件监听器。身体。当图像缩放时，鼠标水平移动量moveX按比例变化，以达到一个相对静止的滑块位置。为了得到正确的鼠标移动值，“lastmousexposition”cursorX并没有存储为状态，它只是一个普通的全局变量。源码.tsximportReact,{useState,useEffect}from"react";import"./styles.less";exportdefaultfunctionApp(){return(测试拖拽组件
);}constSwiperWindow=({leftSrc="",rightSrc=""})=>{让cursorX=0;const[boxState,setBoxState]=useState({boxW:0,boxH:0});const[sliderW,setSliderW]=useState(40);//滑条的宽度constINITLEFT=-(sliderW/2);const[sliderLeft,setSliderLeft]=useState(INITLEFT);const[sliderMax,setSliderMax]=useState(0);const[moveX,setMoveX]=useState(0);const[scale,setScale]=useState(1);useEffect(()=>{setSliderW(document.querySelector(".slider")?.clientWidth||40);setSize(true);return()=>{document.removeEventListener("mousemove",onMouseMove);文档nt.removeEventListener("mouseup",onMouseUp);};},[]);useEffect(()=>{if(boxState.boxW){setSize(false);}},[document.querySelector(".scanBox")?.clientWidth,boxState.boxW]);constsetSize=(init:boolean=false)=>{让new_boxW=document.querySelector(".scanBox")?.clientWidth;让new_boxH=document.querySelector(".scanBox")?.clientHeight;constHalf=sliderW/2;如果（new_boxW）{constnew_sliderMax=new_boxW-一半；setSliderMax(new_sliderMax);if(init){setSliderLeft(INITLEFT+new_boxW/2);setMoveX(new_boxW/2);setScale(new_boxW/2/new_boxW);}elseif(moveX){letnew_sliderLeft=INITLEFT+new_boxW*scale;constHalf=sliderW/2;constMIN=-一半；常数MAX=new_sliderMax；如果（new_sliderLeft<=MIN）{new_sliderLeft=MIN;}if(new_sliderLeft>=MAX){new_sliderLeft=MAX;}setSliderLeft(new_sliderLeft);}setBoxState(Object.assign({boxW:new_boxW,boxH:new_boxH}));}};constonMouseDown=(e:any)=>{让new_cursorX=e.clientX;cursorX=new_cursorX;document.addEventListener("mousemove",onMouseMove);document.addEventListener("mouseup",onMouseUp);};constonMouseMove=(e:any)=>{//鼠标移动距离letmoveX=e.clientX-cursorX;设置移动X（移动X）；让new_sliderLeft=sliderLeft+moveX;setScale((new_sliderLeft-INITLEFT)/boxState.boxW);constHalf=sliderW/2;constMIN=-一半；constMAX=sliderMax;如果（new_sliderLeft<=MIN）{new_sliderLeft=MIN;}if(new_sliderLeft>=MAX){new_sliderLeft=MAX;}setSliderLeft(new_sliderLeft);};//当鼠标弹起触发事件constonMouseUp=(e:any)=>{cursorX=e.clientX;文档.removeEventListener("mousemove",onMouseMove);document.removeEventListener("mouseup",onMouseUp);};const{boxW,boxH}=boxState;返回(
