我已经尝试了很多,但是没有得到适当的解决方案。
这是我的代码:
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
$(".img").toggleClass("active", 1000);
});
});
body {
background: red;
width: 100%;
margin: 0;
}
.col {
width: 30%;
}
.img {
display: block;
transition: all 0.5s ease;
position: relative;
transition: all 0.5s ease;
-webkit-transition: 1s
}
.img img {
width: 100%;
}
.img.active {
position: absolute;
left: 0;
top: 0;
transform: scale(2.5);
-webkit-transform-origin: top left;
transition: all 0.5s ease;
}
.img.active img {
transition: all 0.5s ease;
}
.zoom-close {
position: absolute;
right: 10px;
bottom: 10px;
background: #eee;
border: 0;
width: 32px;
height: 32px;
padding: 8px 8px 15px;
cursor: pointer;
outline: 0;
border-radius: 0;
transition: all 0.5s ease;
}
.zoom-close.transform {
border-radius: 100%;
transition: all 0.5s ease;
z-index: 10;
background: #fff;
position: absolute;
right: 5px;
top: 18px;
}
.zoom-close.transform .zoom-inner {
opacity: 0;
transition: all 0.5s ease;
}
.zoom-close.transform .zoom {
border: 0;
}
.zoom-close.transform .zoom:before {
width: 2px;
height: 17px;
top: 1px;
left: 7px;
transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom-close.transform .zoom:after {
height: 2px;
width: 17px;
top: 9px;
left: -1px;
transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom {
width: 10px;
height: 10px;
border-radius: 8px;
position: relative;
border: 2px solid #000;
}
.zoom:before {
content: '';
width: 2px;
height: 8px;
background: #000;
display: block;
top: 1px;
left: 4px;
position: absolute;
transition: all 0.5s ease;
}
.zoom-inner {
width: 8px;
height: 3px;
display: block;
background: #000;
position: absolute;
top: 10px;
left: 7px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.5s ease;
}
.zoom:after {
content: '';
height: 2px;
width: 8px;
background: #000;
display: block;
top: 4px;
left: 1px;
position: absolute;
transition: all 0.5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250">
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
</div>
在以下情况下,有人可以帮助我吗:
当我们单击具有相同变换效果的
<div class="img">
时,<button class="zoom-close">
应该适合窗口大小(宽度为100%)。(请注意:CSS变换属性不是强制性的,但我需要的是类似的效果。)
最佳答案
您需要在width
事件上获取屏幕尺寸,例如height
和zoom
的HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250" >
</div>
<br><br><br>
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
JS
var flag=0;
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
// $(".img").toggleClass("active", 1000);
var height= window.screen.height;
var width = window.screen.width;
if(flag == 0){
$("img").css("width", "15vw");
$("img").css("height", "15vw");
flag=1;
}
else{
$("img").css("width", "100vw");
$("img").css("height", "100vw");
flag=0;
}
});
});
关于javascript - CSS转换比例适合窗口大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59496606/