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



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

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

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

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

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

Итак, к делу!

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<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="https://sergey-oganesyan.ru/wp-content/uploads/2016/01/planet.jpg">

 

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

<script>$(function(){$('#resize_image').draggable().resizable();});</script>

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

Можно разместить и до элемента, обернув этот код в метод — «ready».

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<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>

<style>
#resize_image{
width: 407px;
height: 375px;
float: left;
}
</style>

</head>
<body>

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

</body>
<script>$(function(){$('#resize_image').draggable().resizable();});</script>
</html>

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

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

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

Комментарий (2)

  • Umed| 6 октября 2016

    хорошо очень

  • Umed| 6 октября 2016

    Я рад что на щель такой хороший справочник

  • Оставить ответ

    Ваш e-mail не будет опубликован. Обязательные поля помечены *