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

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

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

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

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

* Ваше имя:

Ваш e-mail:

*