Javascript 使用鼠标位置移动背景

我正在使用react和redux进行电子商务。我想知道我如何才能使产品的照片时，点击接收缩放，可以控制鼠标。像

我发现了这一点，并尝试制作第三个示例，但我无法将其放入我的代码中

这是my Modal.js和style.js的代码

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“./styles”导入{Container，Image}；
导出默认类模式扩展组件{
onClose=e=>{
this.props.onClose&&this.props.onClose（e）；
};
render（）{
如果（！this.props.show）{
返回null；
}
返回(
关闭
/*这是*/{This.props.children}
);
}
}
Modal.propTypes={
onClose:PropTypes.func.isRequired，
show:PropTypes.bool.isRequired，
};

Styles.js

从“样式化组件”导入样式化；
export const Container=styled.div`
位置：固定；
最大宽度：100%；
排名：0；
右：0；
左：0；
底部：0；
填充顶部：30px；
填充底部：30px；
z指数：5；
背景：rgba（0,0,0,0.5）；
>钮扣{
边界：0；
位置：绝对位置；
宽度：40px；
高度：40px；
边界半径：20px；
背景：#7159c1；
边缘顶部：10px；
右边距：30px；
右：0；
排名：0；
}
`;
export const Image=styled.div`
显示器：flex；
证明内容：中心；
对齐项目：居中；
最大宽度：100%；
身高：100%；
位置：相对位置；
溢出：隐藏；
填充：0.10%；
边框：1px实心#f00；
背景：埃比迪；
img{
位置：固定；
变换：比例（1）；
背景重复：无重复；
背景位置：0；
过渡：背景位置0.25s；
}
`;

是否存在不能使用任何现有库的限制？因为我可以向你推荐这个。

这能回答你的问题吗？