如果您曾访问过任何在线购物网站，那么您必须看到以下翻转缩放效果，其中您将鼠标悬停在产品图像的不同部分上以查看该部分的放大预览。
以下是这种效果的演示。将鼠标悬停在两个图像上以查看其放大视图。
您可以在不使用任何jQuery插件的情况下创建此效果，只需使用CSS和JavaScript。现在让我们编码吧。
HTML
<div class = “container-fluid” > <div class = “row” > <div class = “col-lg-3 col-md-3 col-sm-3 col-xs-12” id = “samples” > <img id = “zoom1” src = “pic1.jpg” width = “100px” height = “250px” > <img id = “zoom2” src = “pic2.jpg” width = “100px” height = “250px” > </ div> <div class = “col-lg-9 col-md-9 col-sm-9 col-xs-12“ > <div id = ”preview“ > </ div> </ div> </ div> </ div>
HTML很简单，其中行分为两列，第一列包含我们想要查看其预览的两个图像，第二列包含id为'preview'的div，它将显示预览。两个图像都具有相同的宽度和高度。
CSS
对于CSS代码，让我们分别讨论每个元素。
首先谈论预览div，它给出了一些维度，边界和边距。该 background-repeat: no-repeat 属性确保它将预览的图像（将在JavaScript中成为其背景图像）不会重复。 margin-left: auto 并将 margin-right: auto 此div对齐其父级宽度的中心。
#preview{
margin-top: 10px;
border:1px solid black;
width:350px;
height:500px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
给出图像 display: block 以防止它们并排显示，并且其父div被给予 text-align: center 中心对齐图像。将鼠标悬停在图像上时，鼠标光标将变为zoom-in。
此外，我给display: inline-block 媒体查询中的图像赋值 ，以便在屏幕宽度小于或等于767像素时在同一行显示两个图像。
最终的CSS如下。
#preview{
margin-top: 10px;
border:1px solid black;
width:350px;
height:500px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
#samples{
text-align: center;
}
#samples img {
margin: 10px;
display: block;
border: 2px solid #6A6462;
}
#samples img:hover {
cursor: zoom-in;
border: 0;
-moz-box-shadow:2px 2px 7px 2px rgba(130,130,130,1),-1px -1px 7px 2px rgba(130,130,130,1);
-webkit-box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-1px -1px 7px 2px rgba(130,130,130,1);
box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-2px -2px 7px 2px rgba(130,130,130,1);
}
@media screen and (max-width: 767px){
#samples img {
display: inline-block;
}
}
JavaScript的
这部分有关键代码，负责预览。我们把它分成几步。
步骤1
首先，我定义了两个函数' zoomIn '和' zoomOut '来定义分别放大和缩小对象（在本例中为图像）的操作。这些函数在Javascript中定义。由于我想在鼠标移过图像时放大图像并在鼠标离开图像时缩小图像，我将两个函数分别与 onmousemove 和 onmouseout 事件相关联。
HTML
<div class = “container-fluid” > <div class = “row” > <div class = “col-lg-3 col-md-3 col-sm-3 col-xs-12” id = “samples” > <img id = “zoom1” width = “100px” height = “250px” onmousemove = “ zoomIn （event）” onmouseout = “zoomOut （）” src = “pic1.jpg” > <img id = “zoom2” width = “ 100px“ height = ”250px“ onmousemove = ”zoomIn（event）“ onmouseout = ”zoomOut （）“ src = ”pic2.jpg“> </ div> <div class = “col-lg-9 col-md-9 col-sm-9 col-xs-12” > <div id = “preview” onmousemove = “ zoomIn （event）” > </ div> </ div> </ div> </ div>
第2步
来到JavaScript部分，让我们从zoomOut 函数开始 。我将id为'preview'的div返回到变量 pre 并隐藏其可见性 。
第3步
在 zoomIn 函数中，'pre'的可见性设置为 visible。因此，只要鼠标在图像上移动，预览div就会显示。在所有情况下，它将被隐藏。
条件 $('#zoom1').is(':hover') 是检查鼠标是否悬停在第一张图像上（id为'zoom1'）。如果条件为真，则将第一个图像设置为预览div的背景图像。因此，每当您将鼠标悬停在第一个图像上时，预览div将以第一个图像作为背景显示。同样适用于第二张图像。
但那么预览div中的图像如何变大？
这是因为我分别设置了图像的宽度和高度100px和250像素，但其实际尺寸要大得多。由于我没有在预览div的背景图像上给出任何这样的尺寸约束，因此它在这里采用其全宽和高度。预览div的宽度和高度小于其背景图像的宽度和高度，因此背景图像不会完全覆盖整个div，它给人的感觉就像图像被放大一样。
JS
function zoomIn(event) {
var pre = document.getElementById("preview");
pre.style.visibility = "visible";
if ($('#zoom1').is(':hover')) {
var img = document.getElementById("zoom1");
pre.style.backgroundImage = "url('pic1.jpg')";
}
if ($('#zoom2').is(':hover')){
var img = document.getElementById("zoom2");
pre.style.backgroundImage = "url('pic2.jpg')";
}
}
function zoomOut() {
var pre = document.getElementById("preview");
pre.style.visibility = "hidden";
}
第4步
该语句 var posX = event.offsetX 指定鼠标指针相对于鼠标移动到var posX的图像的位置的X坐标值 。类似地， posY 存储Y坐标的值。
预览div的背景图像的位置由语句给出 pre.style.backgroundPosition=(-posX*2.5)+"px "+(-posY*5.5)+"px";。在这里，我取消了posX和posY，使预览图像背景朝着与鼠标移动相反的方向移动。此外，一些数字乘以posX和posY，以便我们可以在鼠标移动时看到整个预览图像。当您自己尝试根据图像尺寸和预览div更改数字时，这将变得更加清晰。
总结一下，动画的整个代码如下。
HTML
<div class = “container-fluid” > <div class = “row” > <div class = “col-lg-3 col-md-3 col-sm-3 col-xs-12” id = “samples” > <img id = “zoom1” width = “100px” height = “250px” onmousemove = “ zoomIn （event）” onmouseout = “zoomOut （）” src = “pic1.jpg” > <img id = “zoom2” width = “ 100px“ height = ”250px“ onmousemove = ”zoomIn（event）“ onmouseout = ”zoomOut （）“ src = ”pic2.jpg“> </ div> <div class = “col-lg-9 col-md-9 col-sm-9 col-xs-12” > <div id = “preview” onmousemove = “ zoomIn （event）” > </ div> </ div> </ div> </ div>
css
#preview{
margin-top: 10px;
border:1px solid black;
width:350px;
height:500px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
#samples{
text-align: center;
}
#samples img {
margin: 10px;
display: block;
border: 2px solid #6A6462;
}
#samples img:hover {
cursor: zoom-in;
border: 0;
-moz-box-shadow:2px 2px 7px 2px rgba(130,130,130,1),-1px -1px 7px 2px rgba(130,130,130,1);
-webkit-box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-1px -1px 7px 2px rgba(130,130,130,1);
box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-2px -2px 7px 2px rgba(130,130,130,1);
}
@media screen and (max-width: 767px){
#samples img {
display: inline-block;
}
}
JS
function zoomIn(event) {
var pre = document.getElementById("preview");
pre.style.visibility = "visible";
if ($('#zoom1').is(':hover')) {
var img = document.getElementById("zoom1");
pre.style.backgroundImage = "url('pic1.jpg')";
}
if ($('#zoom2').is(':hover')){
var img = document.getElementById("zoom2");
pre.style.backgroundImage = "url('pic2.jpg')";
}
var posX = event.offsetX;
var posY = event.offsetY;
pre.style.backgroundPosition=(-posX*2.5)+"px "+(-posY*5.5)+"px";
}
function zoomOut() {
var pre = document.getElementById("preview");
pre.style.visibility = "hidden";
}
欢迎大家在评论区讨论，整理不易，请大家收藏和关注，感谢您的支持。