什么是悬停时的反应缩放图像？
悬停时缩放图像是一个React组件，用于在鼠标悬停时在桌面浏览器上缩放图像。
安装：
我们需要通过npm安装此组件。
npm安装反应— cursor – 放大 — save
基本用法：
从进口进口‘react’;
从中导入ReactDOM‘react-dom’;
从导入importReactImageZoom‘react-image-zoom’;
const props = {宽度：400，高度：250，缩放宽度：500，img：“1.jpg”};
反应DOM.render（<ReactImageZoom {…props} />，document.getElementById（‘react-app’));
propTypes必需：
宽度
用于指定源图像的宽度。它是必填属性，仅接受数字输入。
高度
它确定源图像的高度。像宽度一样，这也只需要数字输入。这是一个可选的道具。如果未提供高度，则使用浏览器计算的高度。
img
我们需要提供源图像的URL。应该是一个字符串。
规模
它指定图像的比例，并且仅使用数字作为输入。
抵消
它提供了图像的偏移量。 {垂直：数字，水平：数字}
放大Width
提供缩放图像的宽度。缩放图像的高度等于源图像的高度。
放大Style
这只是应用于缩放图像的自定义样式。例，‘不透明度：0.1;背景颜色：灰色’.
放大LensStyle
它与zoomStyle相似，但是效果会赋予变焦镜头。例，‘不透明度：o.i;背景颜色：灰色’
放大Position
它指定缩放图像的位置。我们可以将位置设置为上，左，右，下，原始。默认情况下，指定权利。
在悬停效果上创建图像缩放的步骤：
步骤1：建立HTML档案
<div class=”img-zoom-container”>
<img id=”myimage” src=”img_girl.jpg” width=”300″ height=”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;
}
注意：请务必注意，容器必须有一个“relative” positioning.
步骤3：建立JavaScript档案
函数imageZoom（imgID，resultID）{
var img，lens，result，cx，cy;
img = document.getElementById（imgID）;
结果= \ document.getElementById（resultID）;
/ *创建镜头：* /
镜头= \ 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 =位置–（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”;
/ *显示镜头“sees”: */
result.style.backgroundPosition =“-” + (x * cx) + “px -” + (y * cy) + “px”;
}
函数getCursorPos（e）{
vara，x = 0，y = 0;
e = e || window.event;
/ *获取图像的x和y位置：* /
一个= img.getBoundingClientRect（）;
/ *计算光标’s x and y coordinates, 相对的 to the image: */
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 类 =”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代码并添加缩放效果，即可获得所需的输出。
