Как изменять размеры картинки с помощью мыши на 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, на этом всё, пока!


Раздел: Программирование

Дата последнего изменения: 2016-01-06 01:39:57

Просмотров: 11500

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*