Изменить начальную и конечную позицию перехода CSS

ProgramBox

Изменить начальную и конечную позицию перехода CSS

Post author:admin
Запись опубликована:25 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #css

Вопрос:

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

Ответ №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;
}

Я немного смущен тем, что именно вы пытаетесь. Но приведенный выше код увеличивает и уменьшает масштаб. Вы можете изменить в соответствии с вашими потребностями. 🙂

Ответ №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;
}

Я надеюсь, что приведенный выше код поможет вам. (второй ответ)

1. Спасибо @Rupesh за фрагмент кода. К сожалению, родительский div, содержащий этот тег изображения, не покрывает всю ширину моего экрана, и я хочу отобразить увеличенное изображение в центре моего экрана, как в альбоме, с высотой, являющейся управляющим фактором (80%), без масштабирования.

Ответ №3:

Размещение изображения по центру внутри 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>

1. Спасибо за исправление фиксированной позиции под div, но, к сожалению, я требую, чтобы это изображение всплывало в центре экрана, а NO родительский div не может иметь ширину 100%, так как справа есть еще один html-элемент. Предположим, что это изображение является частью публикации, и при нажатии на него закрывается весь экран, как в режиме просмотра витрины.