使用java脚本缩放图片库

Question

所以我有一个图片库，当你点击图片时，它会放大图片，问题是这只适用于顶部的图片。。。当你向下滚动并点击页面底部的图片时，放大的版本会弹出在顶部，所以我每次都必须向上滚动。

我如何使它在页面所在的位置显示放大版本(这样我们就不必向上滚动查看它(，或者使它在单击放大时滚动到顶部，然后在单击将关闭缩放视图的图片时向下滚动？

这是html:

<center>
<div class="gallery">

<div class="img-w">
<img src="gallery/m1.jpg" />
</div>
<div class="img-w">
<img src="gallery/m2.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m3.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m4.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m5.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m6.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m7.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m8.jpg"  />
</div>


<div class="img-w">
<img src="gallery/p1.jpg" />
</div>
<div class="img-w">
<img src="gallery/p2.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p3.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p4.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p5.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p6.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p7.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p8.jpg"  />
</div>  
<div class="img-w">
<img src="gallery/p9.jpg"  />
</div>

<div class="img-w">
<img src="gallery/u1.jpg" />
</div>
<div class="img-w">
<img src="gallery/u2.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u3.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u4.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u5.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u6.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u7.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u8.jpg"  />
</div>



</div>
<br>
<div class="center">
<p class="bold ">Page 1 | <a href="gallery2.html"> Page 2 </a>
</p>
</div> 

这是css：

/****Gallery****/
.gallery {
width: 100%;
margin-right: 20px;
margin-left: 20px;
border-radius: 3px;
overflow: hidden;
//position: relative;

}
.img-c {
width: 250px;
height: 250px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
margin: 5px 5px;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}

这是脚本：

<script>
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})


$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top


$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);

setTimeout(function() {
copy.addClass("positioned")
}, 0)

}) 



})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
</script> 

我知道这与img-c.active.posited top有关：0！重要线路。。如果我删除它，它确实会更好地工作，但有些图片我必须向下滚动，或者它们在显示时看起来是从顶部剪切的。。。也许有一种方法可以让我无论在页面的哪个位置都能进行全页面缩放？抱歉这里有点新手lol

谢谢！

Answer 1

要求是在单击时使图像填充屏幕，然后在再次单击时"返回"到同一位置，而用户无需向上或向下滚动即可查看。

如果您将所选图像div的位置从绝对更改为固定，但保持所有其他设置，则它将位于视口的顶部，覆盖底层库，单击时将在用户拥有的相同位置显示底层库，这可能是他们所期望的。

.img-c.active {
width: 100% !important;
height: 100% !important;
position:fixed; /* changed from absolute */
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position:fixed; /* changed from absolute */
z-index: 2;
pointer-events: none;
}

(你可能可以去掉这两个！这也很重要，因为设置宽度/高度100%就足够了。(请在这个片段中尝试，选择全屏并向下滚动，然后单击黄色正方形作为示例。(仅此演示使用了颜色而不是图像。(

$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})


$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top


$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);

setTimeout(function() {
copy.addClass("positioned")
}, 0)

}) 



})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})

/****Gallery****/
.gallery {
width: 100%;
margin-right: 20px;
margin-left: 20px;
border-radius: 3px;
overflow: hidden;
//position: relative;

}
.img-c {
width: 250px;
height: 250px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
margin: 5px 5px;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
position:fixed;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
position:fixed;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}
/* bit of styling added just to use background color instead of imgs for demo only */
.img-w {
background-color:cyan;
}
.img-c {
background-color:magenta;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div class="gallery">

<div class="img-w">
<img src="gallery/m1.jpg" />
</div>
<div class="img-w">
<img src="gallery/m2.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m3.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m4.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m5.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m6.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m7.jpg"  />
</div>
<div class="img-w">
<img src="gallery/m8.jpg"  />
</div>


<div class="img-w">
<img src="gallery/p1.jpg" />
</div>
<div class="img-w">
<img src="gallery/p2.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p3.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p4.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p5.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p6.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p7.jpg"  />
</div>
<div class="img-w">
<img src="gallery/p8.jpg"  />
</div>  
<div class="img-w">
<img src="gallery/p9.jpg"  />
</div>

<div class="img-w">
<img src="gallery/u1.jpg" />
</div>
<div class="img-w">
<img src="gallery/u2.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u3.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u4.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u5.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u6.jpg"  />
</div>
<div class="img-w" style="background-color:yellow;"><!-- background color added just for test -->
<img src="gallery/u7.jpg"  />
</div>
<div class="img-w">
<img src="gallery/u8.jpg"  />
</div>



</div>
<br>
<div class="center">
<p class="bold ">Page 1 | <a href="gallery2.html"> Page 2 </a>
</p>
</div>