Показать сообщение отдельно
  #6 (permalink)  
Старый 18.02.2016, 15:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Kirilbl4,
css учите или ищите
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .n_p{
    height: 50px;
    width: 100px;
  }
   .f_p{
       -webkit-transition: all .8s ease-in-out;
       -moz-transition: all .8s ease-in-out;
       -o-transition: all .8s ease-in-out;
       transition: all .8s ease-in-out;
        opacity: 0;
       position: absolute;
       height: 250px;
       width: 500px;
   }
   .show{
       opacity: 1;
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
      $(".n_p").on("click", function() {
      var i = $(".n_p").index(this);
      $(".f_p").not($(".f_p").eq(i).addClass("show")).removeClass("show")
})
   })
  </script>
</head>

<body>
 <img src="http://www.tecmundo.com.br/imagens/2013/5/materias/3671527171051-t250.jpg" class="n_p" alt="" />
 <img src="http://cs5.pikabu.ru/images/big_size_comm/2015-10_2/1444226708114674995.jpg" class="n_p" alt="" />

 <img src="http://www.tecmundo.com.br/imagens/2013/5/materias/3671527171051-t250.jpg" class="f_p show" alt="" />
 <img src="http://cs5.pikabu.ru/images/big_size_comm/2015-10_2/1444226708114674995.jpg" class="f_p" alt="" />

</body>

</html>
Ответить с цитированием