什么是悬停时的反应缩放图像？
悬停时缩放图像是一个React组件，用于在鼠标悬停时在桌面浏览器上缩放图像。
安装：
我们需要通过npm安装此组件。
npm install react —光标–缩放—保存
基本用法：
从“反应”导入反应；
从“ react-dom”导入ReactDOM；
从'react-image-zoom'导入ReactImageZoom;
constprops = {width：400，height：250，zoomWidth：500，img：“ 1.jpg”};
反应DOM.render（<ReactImageZoom {{props} />，document.getElementById（'react-app'））;
propTypes必需：
宽度
用于指定源图像的宽度。它是必填属性，仅接受数字输入。
高度
它确定源图像的高度。像宽度一样，这也只需要数字输入。这是一个可选的道具。如果未提供高度，则使用浏览器计算的高度。
img
我们需要提供源图像的URL。应该是一个字符串。
规模
它指定图像的比例，并且仅使用数字作为输入。
抵消
它提供了图像的偏移量。 {垂直：数字，水平：数字}
zoomWidth
提供缩放图像的宽度。缩放图像的高度等于源图像的高度。
zoomStyle
这只是应用于缩放图像的自定义样式。例如，‘opacity：0.1;背景颜色：灰色’。
zoomLensStyle
它与zoomStyle相似，但是效果会赋予变焦镜头。例如，‘opacity：o.i;背景颜色：灰色’
zoomPosition
它指定缩放图像的位置。我们可以将位置设置为上，左，右，下，原始。默认情况下，指定权利。
在悬停效果上创建图像缩放的步骤：
步骤1：建立HTML档案
<div \ class =“ img -zoom-container”>
<imǵid=“ myimage” src =“ img _girl.jpg” 宽度 =“ 300” 高度 =“ 240” alt =“ Girl”>
<divʻid =“ myresult” class =“ img -zoom-result”></div>
</div>
步骤2：建立CSS档案
* {box-sizing：border-box;}
.img-zoom-container {
位置：相对；
}
.img-zoom-lens {
位置：绝对
边框：1像素实线＃d4d4d4;
/ *设置镜头尺寸：* /
宽度：40px;
高度：40px;
}
.img-zoom-result {
边框：1像素实线＃d4d4d4;
/ *设置结果div的大小：* /
宽度：300px;
高度：300px;
}
注意：必须注意容器必须具有“相对”位置。
步骤3：建立JavaScript档案
函数imageZoom（imgID，resultID）{
var img ，lens，result，cx，cy;
img = document.getElementById（imgID）;
结果= \ document.getElementById（resultID）;
/ *创建镜头：* /
lens = ́document.createElement（“ DIV”）;
lens.setAttribute（“ class”，“ img -zoom-lens”）;
/ *插入镜头：* /
img .parentElement.insertBefore（lens，img）;
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight // lens.offsetHeight;
result.style.backgroundImage ==``URL（'''+ img .src +``'）'';
result.style.backgroundSize ==（img.width * cx）+“ px” +（img.height * cy）+“ px”;
lens.addEventListener（“ mousemove”，moveLens）;
img .addEventListener（“ mousemove”，moveLens）;
lens.addEventListener（“ touchmove”，moveLens）;
img .addEventListener（“ touchmove”，moveLens）;
函数moveLens（e）{
varpos，x，y;
e.preventDefault（）;
pos = getCursorPos（e）;
x =位置x-（lens.offsetWidth / 2）;
y =位置y –（lens.offsetHeight / 2）；
如果（x>img.width-lens.offsetWidth）{x = img .width-lens.offsetWidth;}
如果（x< 0) {x = 0;}
如果（y>img.height – lens.offsetHeight）{y = img .height – lens.offsetHeight;}
如果（y< 0) {y = 0;}
/ *设置镜头的位置：* /
lens.style.left \ = x +“ px”;
lens.style.top = y +``px'';
/ *显示镜头“所见”：* /
result.style.backgroundPosition =“-” +（x * cx）+“ px-” +（y * cy）+“ px”;
}
函数getCursorPos（e）{
vara，x = 0，y = 0;
e = e || window.event;
/ *获取图像的x和y位置：* /
一个= img .getBoundingClientRect（）;
/ *计算光标相对于图片的x和y坐标：* /
x = e.pageX-a.left;
y = e.pageY – a.top;
/ *考虑任何页面滚动：* /
x = x-window.pageXOffset;
y = y – window.pageYOffset;
返回{x：x，y：y};
}
}
步骤4：在HTML中添加CSS和JavaScript文件，然后启动缩放效果
<script>
imageZoom（“ myimage”，“ myresult”）;
</script>
图像悬停放大示例：
用html悬停图像缩放：
<style>
.zoom {
内边距：50px;
背景颜色：绿色；
过渡：转换0.2秒； /* 动画 */
宽度：200像素；
高度：200px；
保证金：0自动;
}
.zoom：hover {
转换：scale（1.5）; / *（150％缩放）* /
}
</style>
<div class=”zoom”></div>
使用CSS的图像缩放悬停效果：
div.image {
宽度：300像素；
高度：200px；
溢出：隐藏；
}
div.image img {
宽度：100％;
高度：自动；
/ *比例* /
-webkit-transform：scale（1）;
-moz-transform：scale（1）;
-ms-transform：scale（1）;
-o-transform：scale（1）;
转换：scale（1）;
/ *VERZÖGERUNG* /
-webkit-transition：所有0.3s线性；
-moz-transition：所有0.3s线性；
-ms-transition：所有0.3s线性；
-o-transition：所有0.3s线性；
过渡：所有0.3s线性；
}
div.image img ：hover {
-webkit-transform：scale（1.2）;
-moz-transform：scale（1.2）;
-ms-transform：scale（1.2）;
-o-transform：scale（1.2）;
转换：scale（1.2）;
}
结论：
悬停时的图像缩放是一种非常高级且有吸引力的缩放效果方式。我们可以有许多道具或属性来赋予不同的效果并增强缩放图像的外观。必须提供图像的宽度。如果未提供高度，则将使用浏览器定义的高度作为默认值。
在这个包中，还有宽度和高度，我们还将找到zoomWidth，比例，img，偏移，缩放样式，缩放镜头样式和缩放位置。编码很简单，只需创建简单的HTML，CSS和JavaScript代码并添加缩放效果，即可获得所需的输出。