Question

＆＃13;

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;
  }
});

＆＃13;

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;
}

＆＃13;

<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">

＆＃13;

我试图使入口看起来像从原始位置缩小的相同图像并且进入中心并且在出口处它以相同的方式返回到它的位置。我尝试使用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;
}

Answer 1

.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;
}

我很想知道你到底在想什么。但上面的代码确实可以放大和缩小。您可以根据需要进行修改。：）

Answer 2

img{
    transition: 0.3s ease-in-out;
    display: block;
    position: fixed;
    top: 20%;
    left: 20%;
}


.imgclick{
            transform: scale(1.4,1.4);
            box-shadow: rgba(0, 0, 0, 1) 15px 15px 50px;
            z-index: 100001;
            padding: 10px;
            background: white;
}

我希望上面的代码可以帮到你。（第二个答案）

Answer 3

将img置于div的中心可以产生您需要的效果

$(document).on('click', 'body img', function() {
  if ($(this).hasClass("imgSmall") || $(this).hasClass("imgClick"))
    $(this).toggleClass("imgSmall imgClick");
  else
    $(this).addClass("imgClick")
  return false;
});

img {
  width: 50%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: 1s linear all;
  padding: 10px;
  background: white;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes imageBig {
  0% {
    box-shadow: 0px 0px 4px #888888;
    width: 50%;
  }
  100% {
    box-shadow: 8px 8px 8px #888888;
    width: 90%;
  }
}
@keyframes imgSmall {
  0% {
    box-shadow: 8px 8px 8px #888888;
    width: 90%;
  }
  100% {
    box-shadow: 0px 0px 4px #888888;
    width: 50%;
  }
}
.imgClick {
  animation-name: imageBig;
}
.imgSmall {
  animation-name: imgSmall;
}
div {
  position: relative;
  height: 250px;
  width: 400px;
  border: 1px solid #ddd;
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="http://www.biologicaldiversity.org/assets/img/species/mammals/GrayWolf_USFWS_FPWC_2_HIGHRES-scr.jpg" alt="image alt" title="Cool">
</div>

更改CSS转换开始和结束位置

3 个答案: