Как изменять размеры картинки с помощью мыши на javascript

Приветствую вас дорогие друзья! В этом уроке я покажу, как легко и просто можно изменять размеры картинки на веб странице!

Изменять размеры картинки очень просто, для этого достаточно навести мышь на одну из сторон картинки (или к одному из углов), нажать и потянуть мышью!

Данный функционал можешь вам понадобиться, например, при создании приложения для проектирования или какого-нибудь графического редактора, где нужно изменять размеры изображений.

Стоит отметить, что данным способом можно изменять размеры не только изображения, но и любого другого объекта на странице!

В заголовке я умышленно упомянул слово “картинка” так как именно этот запрос имеет большую популярность, а значит, данный вопрос интересует многих.

Итак, к делу!

Первым делом необходимо подключить нужные библиотеки и стили:



<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

Теперь, нужно присвоить какой-нибудь идентификатор тому элементу, размеры которого мы хотим изменять – в моем случае в качестве элемент выступит картинка с идентификатором – “resize_image”:

<img id="resize_image" src="http://sergey-oganesyan.ru/wp-content/uploads/2016/01/planet.jpg">

Теперь, все что нужно сделать, так это произвести выборку нужного элемента (в данном случае по id) и повесить на него два метода:

Этот код нужно разместить после выбранного элемента – лучше всего перед закрывающим тегом – “</html>”, чтобы успели загрузиться все элементы DOM.

Можно разместить и до элемента, обернув этот код в метод – “ready”.

Весь код целиком:

<!DOCTYPE html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>



<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

<title>Как изменять размеры картинки с помощью мыши - Seo блог sergey-oganesyan.ru</title>



</head>
<body>

        <img id="resize_image" src="http://sergey-oganesyan.ru/wp-content/uploads/2016/01/planet.jpg">

</body>

</html>

Реальный пример.

Демонстрационный пример

Подписывайтесь на обновления и получайте новые уроки по javascript, на этом всё, пока!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

Как изменять размеры картинки с помощью мыши на javascript: 2 комментария