主页 / 问题 / 837713
Accepted
Алексей Соколов
Asked:2020-06-05 04:33:36 +0000 UTC2020-06-05 04:33:36 +0000 UTC

点击替换链接路径

  • 772

请帮我解决这个问题。

在产品页面上，当您单击将它们替换为左侧大照片的照片时，当您将鼠标悬停在大照片上时，我想制作放大镜

在此处输入图像描述

我放了一个放大镜，但是切换到其他照片的时候和悬停的时候，它只放大了原来很大的照片，我不知道怎么做，所以当切换到新照片时，正是点击的照片会增加。

放大镜脚本本身的工作方式是将一张照片放在href链接中以增加它，当我切换到其他照片时，它会在img路径中被替换，但我需要确保它也被替换为链接

.prev li {
float: left;
list-style-type: none;
padding: 5px;
margin: 10px;
}

img{	
	border: none
}
h1{
	margin: 50px 0 50px 0;
}.cloud-zoom{
	width: 200px;
}
.cloud-zoom-lens {
	border: 4px solid #888;
	margin: -4px;
	background-color: #fff;	
	cursor: move;		
}
.cloud-zoom-title {
	font-family: Arial, Helvetica, sans-serif;
	position: absolute !important;
	background-color: #000;
	color: #fff;
	padding: 3px;
	width: 100%;
	text-align: center;	
	font-weight: bold;
	font-size: 10px;
}
.cloud-zoom-big {
	border: 4px solid #ccc;
	overflow: hidden;
}
.cloud-zoom-loading {
	background:#222;
	padding:3px;
	border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://testing5543.mcdir.ru/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://testing5543.mcdir.ru/cloud-zoom.1.0.2.min.js"></script>
  

<ul>
  <div class="prev">
     <li>
				<img class="hover-image" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" onclick="document.getElementById('bg1').src=this.src" style="cursor: pointer; width:61px;height:91px;display:block;">
				<img class="hover-image" src="https://img2.goodfon.ru/original/600x1024/5/9c/alisa-devushka-krasivaya-volosy-745.jpg" onclick="document.getElementById('bg1').src=this.src" style="cursor: pointer; width:61px;height:91px;display:block;">
				<img class="hover-image" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" onclick="document.getElementById('bg1').src=this.src" style="cursor: pointer; width:61px;height:91px;display:block;">
     </li>
	</div>
</ul>

<div class="main-img-wrapper main-image-product-1113">
	<a class="main-image zoom-hover lightbox-img-src-1113 nut cloud-zoom" rel="position: 'inside', adjustX: 0, adjustY:0" href="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" style="position: relative; overflow: hidden;">
		<img id="bg1" class="img-changer-1113 main-img resized" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" width="323">
	</a> 
</div>

javascript

1 个回答

  1. Best Answer

    将href父锚属性分配添加到处理程序onclick： 

    onclick="document.getElementById('bg1').src=this.src;document.getElementById('bg1').parentNode.href=this.src"


    .prev li {
  float: left;
  list-style-type: none;
  padding: 5px;
  margin: 10px;
}
    <ul>
  <div class="prev">
    <li>
      <img class="hover-image" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" onclick="document.getElementById('bg1').src=this.src;document.getElementById('bg1').parentNode.href=this.src" style="cursor: pointer; width:61px;height:91px;display:block;">
      <img class="hover-image" src="https://img2.goodfon.ru/original/600x1024/5/9c/alisa-devushka-krasivaya-volosy-745.jpg" onclick="document.getElementById('bg1').src=this.src;document.getElementById('bg1').parentNode.href=this.src" style="cursor: pointer; width:61px;height:91px;display:block;">
      <img class="hover-image" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" onclick="document.getElementById('bg1').src=this.src;document.getElementById('bg1').parentNode.href=this.src" style="cursor: pointer; width:61px;height:91px;display:block;">
    </li>
  </div>
</ul>

<div class="main-img-wrapper main-image-product-1113">
  <a class="main-image zoom-hover lightbox-img-src-1113 nut cloud-zoom" rel="position: 'inside', adjustX: 0, adjustY:0" href="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" style="position: relative; overflow: hidden;">
    <img id="bg1" class="img-changer-1113 main-img resized" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" width="323">
  </a>
</div>

    • 1

相关问题