请复制并粘贴此代码，然后尝试。因为在更大的照片中选择照片时我无法更改。
例如，当我选择一个img时，应该将其放置在较大的img中，所以我需要这样做，因为我浪费大量时间尝试这样做。此代码具有显示电子商务中产品详细信息的功能。但我想在我的网页中使用该功能。
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>eCommerce Product Detail</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
/*****************globals*************/
body {
font-family: 'open sans';
overflow-x: hidden; }
img {
max-width: 100%; }
.preview {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
@media screen and (max-width: 996px) {
.preview {
margin-bottom: 20px; } }
.preview-pic {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.preview-thumbnail.nav-tabs {
border: none;
margin-top: 15px; }
.preview-thumbnail.nav-tabs li {
width: 18%;
margin-right: 2.5%; }
.preview-thumbnail.nav-tabs li img {
max-width: 100%;
display: block; }
.preview-thumbnail.nav-tabs li a {
padding: 0;
margin: 0; }
.preview-thumbnail.nav-tabs li:last-of-type {
margin-right: 0; }
.tab-content {
overflow: hidden; }
.tab-content img {
width: 100%;
-webkit-animation-name: opacity;
animation-name: opacity;
-webkit-animation-duration: .3s;
animation-duration: .3s; }
.card {
margin-top: 50px;
background: #eee;
padding: 3em;
line-height: 1.5em; }
@media screen and (min-width: 997px) {
.wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; } }
.details {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.active{
border:#000 3px solid;
}
.colors {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.product-title, .price, .sizes, .colors {
text-transform: UPPERCASE;
font-weight: bold; }
.checked, .price span {
color: #ff9f1a; }
.product-title, .rating, .product-description, .price, .vote, .sizes {
margin-bottom: 15px; }
.product-title {
margin-top: 0; }
.size {
margin-right: 10px; }
.size:first-of-type {
margin-left: 40px; }
.color {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
height: 2em;
width: 2em;
border-radius: 2px; }
.color:first-of-type {
margin-left: 20px; }
.add-to-cart, .like {
background: #ff9f1a;
padding: 1.2em 1.5em;
border: none;
text-transform: UPPERCASE;
font-weight: bold;
color: #fff;
-webkit-transition: background .3s ease;
transition: background .3s ease; }
.add-to-cart:hover, .like:hover {
background: #b36800;
color: #fff; }
.not-available {
text-align: center;
line-height: 2em; }
.not-available:before {
font-family: fontawesome;
content: "\f00d";
color: #fff; }
.orange {
background: #ff9f1a; }
.green {
background: #85ad00; }
.blue {
background: #0076ad; }
.tooltip-inner {
padding: 1.3em; }
@-webkit-keyframes opacity {
0% {
opacity: 0;
-webkit-transform: scale(3);
transform: scale(3); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes opacity {
0% {
opacity: 0;
-webkit-transform: scale(3);
transform: scale(3); }
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); } }
/*# sourceMappingURL=style.css.map */
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="container-fliud">
<div class="wrapper row">
<div class="preview col-md-6">
<div class=" tab-content">
<div class="tab-pane active" ><img id="pic-1" src="http://placekitten.com/400/252" /></div>
<div id="imgtext"></div>
</div>
<ul class="preview-thumbnail nav nav-tabs">
<li >
<a>
<img class="active" src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%"
onclick="myFunction(this);">
</a></li>
<li><a > <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%"
onclick="myFunction(this);"></a></li>
<li><a > <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%"
onclick="myFunction(this);"></a></li>
<li><a > <img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%"
onclick="myFunction(this);"></a></li>
<li><a > <img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%"
onclick="myFunction(this);"></a></li>
</ul>
</div>
<div class="details col-md-6">
<h3 class="product-title">men's shoes fashion</h3>
<div class="rating">
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<span class="review-no">41 reviews</span>
</div>
<p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
<p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
<p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
<p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
<p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
<p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
<p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>
<h4 class="price">current price: <span>$180</span></h4>
<p class="vote"><strong>91%</strong> of buyers enjoyed this product! <strong>(87 votes)</strong></p>
<h5 class="sizes">sizes:
<span class="size" data-toggle="tooltip" title="small">s</span>
<span class="size" data-toggle="tooltip" title="medium">m</span>
<span class="size" data-toggle="tooltip" title="large">l</span>
<span class="size" data-toggle="tooltip" title="xtra large">xl</span>
</h5>
<h5 class="colors">colors:
<span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span>
<span class="color green"></span>
<span class="color blue"></span>
</h5>
<div class="action">
<button class="add-to-cart btn btn-default" type="button">add to cart</button>
<button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/src/jquery.ez-plus.js"></script>
<script>
$('#pic-1').ezPlus({
zoomType : "lens",
lensShape : "round",
lensSize : 200
});
function myFunction(imgs) {
var expandImg = document.getElementById("pic-1");
var imgText = document.getElementById("imgtext");
$( '.preview-thumbnail' ).find( 'img.active' ).removeClass( 'active' );
imgs.className += "active";
expandImg.src = imgs.src+"?w=400&ch=DPR&dpr=2";
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
</body>
</html>
最佳答案
确定将其添加到函数中：
$（“＃pic-1”）。data（'zoom-image'，imgs.src +“？w = 1200＆ch = DPR＆dpr = 2”）。ezPlus（{
zoomType：“镜头”，
lensShape：“圆形”，
镜头尺寸：200
}）;