Форум

Хан · #1 (**permalink**) 26.07.2016, 13:55

Всем привет! Есть такая задача: Нужно при клике на картинку сделать её больше в 7 раз (это уже сделано), а при втором клике вернуть исходный размер. Вот код:

<script type="text/javascript">
         $(document).ready(function() {
			$("img").bind("click", function(event) {
				$(event.target).animate( 
				{
					width: $(event.target).width() * 7,
					height: $(event.target).height() * 7
				},
				3000);
			});
		});
</script

<p class="img">
      <img src="images/straus.jpg" style="width: 100px; height: 100px;" alt="" />
</p>

рони · #2 (**permalink**) 26.07.2016, 14:08

Хан,
toggleClass это всё что вам нужно вместо строк 4-9

warren buffet · #3 (**permalink**) 26.07.2016, 14:15

Ну так запиши исходный размер в какой-нить тег и восстанавливай.

Хан · #4 (**permalink**) 26.07.2016, 14:31

А как toggleClass в код вставить? Чтобы при втором клике..?

рони · #5 (**permalink**) 26.07.2016, 14:37

Хан,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .img img { display: block; margin:  0 ;
     transition: all 3s ease-in-out;
     width: 100px;
     height: 100px;
  }
  .big{
    transform: scale(7);
    padding: 10% 48%;
  }
  .img {
    overflow: hidden;
  }
 .img img.b{
    margin: 0 25%;
     width: 700px;
     height: 700px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
    $(".img img").on("click", function() {
    $(this).toggleClass("b")
})
});
  </script>
</head>

<body>

<p class="img">
      <img src="http://www.newyork.ru/ic/images.newsru.com/pict/id/large/796764_20051013122324.gif"  alt="" />
</p>




</body>
</html>

warren buffet · #6 (**permalink**) 26.07.2016, 14:51

Хан, если 700% это вечное число, то пишешь правило

.enlarge-image{max-width:700%;max-height:700%;}

и переключаешь его по щелчку

image.addEventListener('click',function(e){
      this.classList.toggle('enlarge-image');
});

и все.

Хан · #7 (**permalink**) 26.07.2016, 15:47

Ничего из всего представленного не подошло, но все ровно спасибо, тему не закрываю.

рони · #8 (**permalink**) 26.07.2016, 16:08

Сообщение от Хан

не подошло

почему?

рони · #9 (**permalink**) 26.07.2016, 16:26

Хан,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .img img {
     width: 100px;
     height: 100px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(window).on("load", function() {
    $(".img img").each(function(e, a) {
        a = $(a);
        var b = a.height(),
            c = a.width(),
            d = [{
                height: b,
                width: c
            }, {
                height: 7 * b,
                width: 7 * c
            }];
        a.on("click", function() {
            a.stop().animate(d.reverse()[0], 3E3)
        })
    })
});
  </script>
</head>

<body>

<p class="img">
      <img src="http://www.newyork.ru/ic/images.newsru.com/pict/id/large/796764_20051013122324.gif"  alt="" />
</p>




</body>
</html>

Хан · #10 (**permalink**) 26.07.2016, 18:03

Ты крут! Получилось, у меня получалось, только без нажатия, т.е. картинка увеличивается и тут же обратно. А то что ты скинул работает прекрасно, теперь буду разбирать. Спасибо!

Форум

Справочник

Discord чат

Курсы javascript