var ImageTrigger = false;
$(document).on('click', 'body img', function() {
if (!ImageTrigger) {
$(this).addClass("imgclick");
ImageTrigger = true;
return false;
}
});
$(document).on('click', 'body', function() {
if (ImageTrigger) {
$("img").removeClass("imgclick");
ImageTrigger = false;
}
});
img {
transition: 0.3s ease-in-out;
max-width: 90%;
}
.imgclick {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* transform-origin: 0px center 0px; */
box-shadow: rgba(0, 0, 0, 1) 15px 15px 50px;
z-index: 100001;
padding: 10px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="imgclick" style="max-height: 400px;max-width:50%;margin: 0 auto;display: table;" src="http://www.biologicaldiversity.org/assets/img/species/mammals/GrayWolf_USFWS_FPWC_2_HIGHRES-scr.jpg" alt="image alt" title="Cool">
我试图让入口看起来像从原始位置缩小并进入中心的同一图像,在退出时它又回到原来的位置。我尝试使用 transform-origin
但没有成功。
还有什么干净的方法可以让图像占据 90% 的屏幕而不扭曲纵横比?
编辑:
点击图片时,图片从右下角进入,返回时从左上角进入。我试图让它看起来像是来自原始图像并返回到原始图像,而不是左上角和右下角。
我使用的初始代码
.imgclick{
max-height: 400px;
max-width: 95%;
margin: 0px auto;
display: table;
transform: scale(1.44);
transform-origin: left center 0px;
box-shadow: rgba(0, 0, 0, 0.611765) 0px 0px 13px;
z-index: 100001;
padding: 10px;
background: white;
position: relative;
}
最佳答案
.img{
transition: 0.3s ease-in-out;
max-width:90%;
transform: scale(1);
}
.imgclick{
transform: scale(1.2);
box-shadow: rgba(0, 0, 0, 1) 15px 15px 50px;
z-index: 100001;
padding: 10px;
background: white;
}
我不太清楚您到底在尝试什么。但是上面的代码确实放大和缩小了。您可以根据需要进行修改。 :)
关于javascript - 更改 CSS 过渡开始和结束位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40217112/